html - CSS div 样式

Question

我有一个 div，它里面包含两个 div，我包括下面的源代码，问题是：如果我在 firefox 中缩小，chrome 从这些 div 第二个 div 从它的位置流出并站在第一个 div 下方，我应该如何编写 css 以使其保持原位？

<div id="container">
    <div id="id1"></div>
    <div id="id2"></div>
</div>

Style.css 是

#container {
    width: 646px;
    height: auto;
    margin:0 auto;
    padding:0;
}

 #id1 {
    float: left;
    width: 315px;
    height: 115px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    box-shadow: 0 1px 1px #cccccc;
}

 #id2 {
    float: left;
    width: 314px;
    height: 115px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    box-shadow: 0 1px 1px #cccccc;
    margin-left:13px;
}

Answer 1

这是因为如果您缩小屏幕上的元素的大小。但是因为边框太小了，他们不能再减小它的大小，所以它会保持不变。

如果你真的想修复它，你应该将宽度#container增加到大约652px。