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

我有3个div框（具有固定的宽度和动态高度），它们彼此相邻设置。在Chrome中可以正常使用。但是在Mozilla和IE中，这些盒子并不会保持不变，它们会自行分解并相互叠置，这绝对是我不希望发生的事情。即使我最小化窗口大小（在所有浏览器中都会发生），这些框也会损坏，并且不会停留在同一行中。我想摆脱这个问题。我希望无论窗口有多大尺寸或使用什么浏览器，盒子都不会损坏。它们必须仍然能够彼此相邻。

见here

[注意/边信息：我将每个框的宽度设置为253像素，因为我的身体的最大宽度设置为1200像素，估计为253像素，以便它们都可以容纳在1200像素之内]

我正在处理的这段代码：

.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;


}

最佳答案

您需要做的就是将内容放入一个块级容器元素中，该元素的宽度足够使元素不会换行到下一行：

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;”。在容器

元素上，这样我可以确切地看到尺寸是什么样子，以及页面中实际发生的情况。

关于javascript - 为什么Firefox和IE会分解我的div框并放在彼此下面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26745905/