Question

我想知道是否有一种纯粹的css方法可以让div在彼此流过时改变对齐方式，或者在窗口调整大小时“换行”。一行上有两个div，一个浮动，另一个浮动。在较小的视口上，它们堆叠但保持左右对齐。我可以将它们放在像这个小提琴这样的媒体查询中心：https://jsfiddle.net/vrac/gcuekarx/，但媒体查询并不理想，因为左框内容的长度可变，因此为媒体查询设置断点只是猜测。干杯

HTML：

<div id="nav_row">
  <div id="left_box">Left box with variable content width xxxxxxxxxxxxx
  </div>
  <div id="right_box">Right box

  </div>
</div>

CSS：

#nav_row {
  background: blue;
  display: table;
  width: 100%;
  position: relative;
}

#left_box {
  background: red;
  display: block;
  float: left;
}

#right_box {
  background: green;
  display: block;
  text-align: right;
  float: right;
}

媒体查询：

@media (min-width: 250px) and (max-width: 400px) {
  #nav_row {
    background: yellow;
  }
  #left_box {
    background: purple;
    float: none;
    text-align: center;
  }
  #right_box {
    background: teal;
    float: none;
    text-align: center;
  }
}

Answer 1

在我看来，更改对齐的最简单方法是使用

Flexbox的

很容易改变＆＃39;包装＆＃39;使用柔性包装。

您可以在此处查看更多内容https://css-tricks.com/snippets/css/a-guide-to-flexbox/

当div流过彼此时改变div的对齐方式

1 个答案: