一旦单个元素换行，其余元素也会换行

Question

我有一个页面，其中包含一部分内联块，我试图完成的是让它们都在同一行上，如果它们适合，但一旦其中一个换行我希望它们都换行到新行。我有一个连续的javascript位置/宽度检查的想法，但我希望CSS或引导程序中内置了一些更干净的东西。

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

这是一个示例小提琴，其中第一个容器是正确的预期行为，但我希望底部容器都包装： 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

在我看来，有 2 个 straigtforward css 选项。

a( 使"窄容器"变窄 - 从 500 像素减少到例如 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>