Question

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

请参阅here

[注意/侧面信息：我已将每个盒子的宽度设置为253像素，因为我的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

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

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

之所以这样做是因为＆lt; div class =＆＃34; box＆＃34; /＆GT;元素有＆＃34;显示：内联块;＆＃34; - 使它们更像是一个元素，例如＆lt; img /＆gt;它有高度和宽度，但是它是内联显示的，如果一行没有足够的空间，元素将换行到下一行。

您可以尝试使用容器＆lt; div /＆gt;元素是放置＆＃34; white-space：nowrap;＆＃34;在它上面，而不是指定一个特定的宽度。

当我像这样乱搞CSS时，我会做的一件事是，我会放一个临时的＆＃34;背景颜色：＃F0F;＆＃34;在容器上＆lt; div /＆gt;因此，我可以准确地看到尺寸的样子，以及页面中真正发生的事情。

为何选择Firefox＆amp; IE拆分我的div盒并放在彼此之下？

1 个答案: