时间戳

首页 > 解决方案 > 如何在固定位置的 Flexbox 中开始新行？

html - 如何在固定位置的 Flexbox 中开始新行？

问题描述

这是我的CSS：

.modal-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.96);
  transition: width 1s ease-out;
}

.buttonBar {
  right: 0;
  height: 20px;
  color: red;
}

.theImage {
  position: absolute;
  top: 0;
  right: 0;
  width: 350px;
  height: 350px;
}

.button {
  float: left;
}

这是html：

    <head>
    <link rel="stylesheet" href="styles.css">
</head>
<div class="button">
    <button id="open">Test</button>
</div>
<div class="modal-backdrop">
    <img class="theImage" src=index.png />
    <div class="buttonBar">button bar</div>
</div>

<!-- page 108 -->
<script type="text/javascript">
    var button = document.getElementById('open');
    var drawer = document.getElementsByClassName('modal-backdrop')[0];
    var height = drawer.scrollHeight;
    var width = drawer.scrollWidth;
    button.addEventListener('click', function (event) {
    event.preventDefault();
    drawer.style.setProperty('width', '350px');
    drawer.style.setProperty('height', height + 'px');
});
</script>

按钮栏还没有任何按钮，文本只是一个占位符。我希望该按钮栏位于 img 标签下，但它所做的只是与 img 重叠。关于如何使它工作的任何想法？

标签： htmlcss

解决方案

您不需要将绝对位置或固定位置添加到.theImageor .buttonBar。

只需使用flex-direction: column;并且 buttonBar div 将在图像下。

jsfiddle：https ://jsfiddle.net/aof6ysmn/

推荐阅读