我有那个代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:rgb(150,200,255); margin:3px ; height:50px; width:100%px">
<font size=6> <center> <b> 123123123123123123123123 </b> </center></font>
</div>
<div style="background-color:rgb(180,215,255); display: inline-block; float:left; width:300px; height:90vh; " >
aasdasdasdasdasdasdasdasdasd
<ol>
<li> 11111111 </li>
<li> 222222222222222222222222222222 </li>
<li> 3333333333333333 </li>
</div>
<div style="float:left; display: table-cell; vertical-align: top;">
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
</div>
看起来不错。 http://i.cubeupload.com/yOz2zu.png 但是，如果我向第三个 div 添加更多单词，它就会下降。 http://i.cubeupload.com/pZ65dr.png 有什么方法可以让 div 在不添加固定宽度的情况下不下降吗？我只想拥有固定宽度的第一个 div，第二个必须填充。我不想使用 JS。感谢您的帮助。
最佳答案
您只需要 float 其中一个 div 标签。您还可以摆脱表格样式显示 CSS。正如其他评论所提到的，您不想使用 <font>和 <center>标签。它们已被弃用，不再受支持。
<div style="background-color:rgb(150,200,255); margin:3px ; height:50px; width:100%;">
<b> 123123123123123123123123 </b>
</div>
<div style="background-color:rgb(180,215,255); display: inline-block; float:left; width:300px; height:90px;">
aasdasdasdasdasdasdasdasdasd
<ol>
<li> 11111111 </li>
<li> 222222222222222222222222222222 </li>
<li> 3333333333333333 </li>
</ol>
</div>
<div>
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
aaaaaa aaaaa aaaaaa aaaaa aaaaaa
</div>
关于HTML 并排 div，其中一个具有固定宽度，第二个适合剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33881246/