给定以下 HTML。它显示两列:#left、#right。两者都是固定宽度并具有 1px 边框。宽度和边框等于上容器的大小:#wrap。
当我通过按 Ctrl+ 缩小 Firefox 3.5.2 时，列会换行 ( demo )。
如何防止这种情况？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {float:left}
#wrap {width:960px}
#left, #right {width:478px;border:1px solid}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
最佳答案
尝试切换到不同的 box model如下:
#left, #right
{
width:480px;
border:1px solid;
box-sizing: border-box;
/* and for older/other browsers: */
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box
}
关于css - 缩小 firefox 缩放时如何防止 float 布局换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1274151/