html - 防止容器包装，让其子容器包装

Question

我的布局看起来像这样:

<div class="left">
    ...
</div>

<div class="right">
    <div class="inner" />
    ... a bunch of these ...
    <div class="inner" />
</div>

CSS:

div { display: inline-block; }
.left { width: 25%; }
.right { width: 75%; }
.inner { width: 33%; }

我想做以下事情:

当屏幕为正常尺寸时:

+--+-----+
|  |O O O|
|  |O O O|
+--+-----+

当我减小浏览器的宽度时我希望发生什么:

+--+---+
|  |O O|
|  |O O|
|  |O O|
+--+---+

实际发生了什么:

+--+
|  |
|  |
+--+
+-----+
|O O O|
|O O O|
+-----+

如果我进一步缩小浏览器:(我也想避免这种情况)

+--+
|  |
|  |
+--+
+---+
|O O|
|O O|
|O O|
+---+

这可行吗？

Answer 1

我希望这会给你带来更好的结果。

div {
  display: inline-block;
  margin: 0 auto;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 75%;
  float: right;
}

.inner {
  width: 33%;
}

<div class="left">
  ...
</div>

<div class="right">
  <div class="inner" /> ... a bunch of these ...
  <div class="inner" />
</div>