Question

我有一个页面，其中包含一段内联块，我想要完成的是如果它们适合的话，它们都在同一行上但是只要其中一个包裹我想要它们所有包裹到新的线条。我对一些连续的javascript位置/宽度检查有一个想法，但是我希望有一些内容可以更好地内置到CSS或bootstrap中。

编辑：澄清一点 - 每个块的宽度都是可变的，并且在页面加载后不会改变容器的宽度是可变的，可能会在页面加载后更改（调整浏览器窗口/移动方向的大小会发生变化）。

下面是一个示例小提琴，其中第一个容器是正确的预期行为，但底部容器我想要包装所有东西： https://jsfiddle.net/bxye0L4L/1/

<div class="wide-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>
<br>
<div class="narrow-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>

CSS

.wide-container {
  width: 700px;
  border: black solid;
}
.narrow-container {
  width: 500px;
  border: black solid;
}

.block {
  display: inline-block;
  width: 200px;
  height: 100px;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: blue;
}

Answer 1

在我看来，有两种不同的css选项。

a）使“窄容器”更窄 - 从500px减少到例如350或300

或

b）您可以为底部容器创建一个单独的css类，并将它们设置为阻止，如果您希望它们在另一个容器中排列。

狭义的是500有原因吗？如果是这样，我会选择第二个选项。我包括片段

.wide-container {
  width: 700px;
  border: black solid;
}

.narrow-container {
  width: 500px;
  border: black solid;
}

.block {
  display: inline-block;
  width: 200px;
  height: 100px;
}

.iblock {
  display: block;
  width: 200px;
  height: 100px;
  margin: 3px 0px;
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="wide-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>
<br>
<div class="narrow-container">
  <div class="iblock one"></div>
  <div class="iblock two"></div>
  <div class="iblock three"></div>
</div>

.wide-container {
  width: 700px;
  border: black solid;
}
.narrow-container {
  width: 300px;
  border: black solid;
}

.block {
  display: inline-block;
  width: 200px;
  height: 100px;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: blue;
}

<div class="wide-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>
<br>
<div class="narrow-container">
  <div class="block one"></div>
  <div class="block two"></div>
  <div class="block three"></div>
</div>

只要单个元素换行，其余元素就会换行

1 个答案: