这简直要了我的命。我的问题是两个具有百分比宽度的 Div 不适合在一起。上次我检查时，75% + 25% = 100%，但不知何故，它们总是破坏布局，不规则的文本进入下一个可用的空白空间。
正如您将在下面的简化示例中看到的，我已经尝试使用 display: inline-block、float: left float: right、white-space:nowrap 和 overflow: hidden。
#reddiv {
width: 75%;
height: 150px;
border: 1px solid red;
float: left;
display: inline-block;
/*white-space:nowrap;*/
/*overflow: hidden;*/
}
#bluediv {
width: 25%;
height: 500px;
border: 1px solid blue;
float: left;
display: inline-block;
/*float: right;*/
/*white-space:nowrap;*/
/*overflow: hidden;*/
}<!DOCTYPE html>
<html>
<head>
<style>
#reddiv {
width: 75%;
height: 150px;
border: 1px solid red;
float: left;
display: inline-block;
/*white-space:nowrap;*/
/*overflow: hidden;*/
}
#bluediv {
width: 25%;
height: 500px;
border: 1px solid blue;
float: left;
display: inline-block;
/*float: right;*/
/*white-space:nowrap;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div id="reddiv"></div>
<div id="bluediv"></div>
<p>Unruly text</p>
</body>
</html>最佳答案
这些是正确的，但是你在使用 display: inline-block 时也必须意识到，空白是被考虑在内的。所以 75% + 25% + 一点空白 = 超过 100% 参见 fiddle https://jsfiddle.net/u9z1euwn/
<div id="reddiv"></div><div id="bluediv"></div>
关于html - 百分比宽度 Div 不适合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37446708/