我在浏览器中缩小页面时遇到问题。
这是一个简单的页面，body宽度为970px，分为左右两部分。左边一个是300px，向左浮动，margin-right 10px，右边一个是660px，向右浮动。这在我放大或缩小时没问题。
但是当我将左侧宽度更改为 298px，并将右侧宽度添加到 658px 时，为两个部分添加 1px 边框，虽然在正常尺寸下没问题，但是当我缩小(ctrl+鼠标滚轮向下)到 90% 时，右侧部分下拉并破坏布局。您可以在这里查看详细信息:jsfiddle
<body>
<style>
</style>
<div id='left'>left</div>
<div id='right'>right</div>
</body>
最佳答案
为了给您的布局一些灵 active ，请为您的 div 使用百分比宽度，并按照前面答案中的建议左右浮动，但不要设置边距。让边距成为剩余的空间。使用精确的宽度或百分比值加起来恰好为 100% 时，由于 Shomz 解释的原因，布局可能会在一个或多个浏览器中中断。
#left{
float:left;
width:30%;
}
#right{
float:right;
width:65%;
两个元素之间的空间将与 5% 的边距相同，并且不太可能中断。
关于javascript - 浏览器缩小会破坏页面布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20183942/