CSS / HTML：当我缩小浏览器时浮动不起作用

Question

我有一个简单的HTML，如下所示：

<div id="main_container">
 <div class="floated_box">box 1</div>
 <div class="floated_box">box 2</div>
 <div class="floated_box">box 3</div>
 <div class="floated_box">box 4</div>
 <div class="floated_box">box 5</div>
 <div style="clear: both;"></div>
</div>

以及我的html元素的以下css：

#main_container {
  width: 400px;
  margin: 20px auto;
  border: 2px solid #cccccc;
  padding: 5px;
}

.floated_box {
  border: 1px solid #990000;
  display:block;
  float: left;
  height: 100px;
  width: 198px;
}

上面的代码完全符合我的要求：

然而，我发现了一个镜像错误，就是当我缩小浏览器时（使用ctrl +鼠标滚轮），我的浮动元素都被破坏了，就像图像一样下面：

当我为浮动元素删除css代码border时，缩小不会再破坏浮动元素。所以我发现可能border属性会破坏浮动元素。

如果我总是需要浮动元素的border属性，我怎么能修复bug？提前谢谢。

以下是jsfiddle demo

Answer 1

在指定元素的宽度时，您可以使用border-box box-sizing来包含边框：

＆＃13;

＆＃13;

#main_container {
    width: 400px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 198px;
    box-sizing: border-box;
}

＆＃13;

<div id="main_container">
    <div class="floated_box">box 1</div>
    <div class="floated_box">box 2</div>
    <div class="floated_box">box 3</div>
    <div class="floated_box">box 4</div>
    <div class="floated_box">box 5</div>
    <div style="clear: both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

另一种方法是使用负边距来计算边框宽度：

margin: 0px -1px;

Answer 2

只需将宽度更改为：49％：DEMO

 #main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #cccccc;
 padding: 5px;
}

.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 49%;
}

Answer 3

这是一个可能适合您的解决方案。

#main_container {
    width: 100%;
    max-width:400px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 5px;
}
.floated_box {
    border: 1px solid #990000;
    display:block;
    float: left;
    height: 100px;
    width: 45%;
}

<div id="main_container">
 <div class="floated_box">box 1</div>
 <div class="floated_box">box 2</div>
 <div class="floated_box">box 3</div>
 <div class="floated_box">box 4</div>
 <div class="floated_box">box 5</div>
 <div style="clear: both;"></div>
</div>

http://jsfiddle.net/sk4qm2w5/2/

您可能还想尝试哪种宽度最适合您。 宽度：45％; 仅用于表达观点。