Question

我有一个100％的div和两个宽度为50％的div：

<div class="container">
     <div class="half">Box 1</div>
     <div class="half">Box 2</div>
</div>

.container {
     float: left;
     width: 100%;
}
.half {
     float: left;
     width: 50%;
}

显然，如果屏幕宽度是960px之类的偶数，那么这可以找到，但961px会导致右侧框丢失。我知道为什么会发生这种情况：961并没有均匀地消灭2，导致左边的方框向上舍入。有没有一种技术可以用来防止这种情况没有JS / jQuery？

Answer 1

您可以将半个div包装在一个div中并使用display：table;

HTML

<div class="container">
  <div class"half"></div>
  <div class"half"></div>
</div>

CSS

.container{ display: table; }
.half{ display: table-cell; vertical-align: top; }

Answer 2

我不知道它是否有效，但您可以尝试使用类似margin: 0px auto之类的动态边距。而不是为半场做49％的宽度

Answer 3

你很可能会对元素应用某种填充或边距。您可以通过对两个元素应用box-sizing并将边距清零来避免填充问题：

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin-left:0px;
margin-right:0px;

注意：这与ie8及以下

不兼容

我可以防止两个宽度为50％的div在奇数宽度下降吗？

3 个答案: