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。