javascript - 为什么 Firefox 和 IE 会分解我的 div 框并放在彼此下面？

Question

我有 3 个彼此相邻的 div 框(具有固定宽度和动态高度)。这在 Chrome 中运行良好。但在 Mozilla 和 IE 中，盒子不会保持不变，它们会自行分解并叠放在一起，这是我绝对不想发生的事情。即使我最小化窗口大小(所有浏览器都会发生这种情况)，这些框也会分解并且不会留在同一行中。我想摆脱这个问题。我希望无论窗口有多大或使用什么浏览器，盒子都不应该分解。它们必须仍然能够彼此相邻。

参见 here

[注意/补充信息:我已将每个框的宽度设置为 253 px，因为我的 bosy 的最大宽度设置为 1200px，估计为 253px，以便它们都可以容纳在 1200px 内]

我正在处理的这段代码:

.HTML:

<div class="box">box1box1box1box1box1<br>

</div>
<div class="box">Box2Box2Box2Box2Box2<br>


</div>
<div class="box">box3box3box3box3box3<br>

</div>

.CSS:

.box {
  display:inline-block;

  margin-top:100px;
  -webkit-box-flex: 1;
-moz-box-flex: 1;

  margin-bottom:60px;
  margin-left:70px;
  padding:15px;

  width:253px;

  border: 4px solid gray;
  border-radius:5px;


}

Answer 1

您需要做的就是将您的内容放入一个 block 级容器元素中，该元素的宽度足以让元素不会换行到下一行:

http://jsfiddle.net/o8r97fhf/

HTML:

<div class="container">
    <div class="box">box1box1box1box1box1<br /></div>
    <div class="box">Box2Box2Box2Box2Box2<br /></div>
    <div class="box">box3box3box3box3box3<br /></div>
</div>

CSS:

.container {
    width:1161px;
}
.box {
    display:inline-block;
    margin-top:100px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    margin-bottom:60px;
    margin-left:70px;
    padding:15px;
    width:253px;
    border: 4px solid gray;
    border-radius:5px;
}

之所以这样做是因为

元素有“display:inline-block;” - 使它们更像 这样的元素，它有高度和宽度，但内联显示，如果一行上没有足够的空间，元素将换行到下一行。

您可以尝试使用容器

元素做的另一件事是放置“white-space: nowrap;”在它上面而不是在它上面指定一个特定的宽度。

当我像这样摆弄 CSS 时，我会做的一件事是，我会放置一个临时的“background-color:#F0F;”在容器

元素上，这样我就可以准确地看到尺寸的样子，以及页面中真正发生的事情。