Question

当父 div 太小而无法在同一行上显示它们时，我希望下面的块堆叠在一起。

我尝试使用 @media 规则和 max-width 但它只考虑浏览器的宽度，而不考虑父 div 的宽度。

我尝试过使用宽度而不是最大宽度，但没有帮助。

override

.menuTwoColumns {
  display: table;
}

.menuTwoColumns > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 20px;
}

/* this only help for the browser width not the parent div width */
@media screen and (max-width: 479px) {
    .menuTwoColumns {
        display: block;
    }
    .menuTwoColumns > div {
        display:inline-block;
    }
}

Answer 1

使用 flexbox 做不同的事情

.menuTwoColumns {
  display: flex;
  flex-wrap:wrap;
}

.menuTwoColumns > div {
  flex:calc(479px / 2);
  display:flex;
  align-items:center;
}

<div style="background-color:grey;  width: 500px;  resize: horizontal;  overflow: auto;">
  <div class="menuTwoColumns">
    <div>
      <p>You can resize</p>
    </div>
    <div>
      <p>the parent div with your mouse the parent div with your mouse and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text and more text</p>
    </div>
  </div>
</div>

响应不是取决于屏幕宽度而是取决于父 div 宽度？

1 个答案: