我有一个包含页眉、页脚和正文内容的布局。这是一个非常标准的布局。我们有报告有时会超出硬编码宽度'但我们需要将左侧导航和正文内容放在同一行。使用下面的 HTML 代码，如果宽度延伸得太远(比如正文中的内容宽度超过 900+)，则正文内容会在左侧导航下方流动。
基本上，我们希望内容和左侧导航保持在同一行，而不管该正文内容部分中实际有多少内容。有没有一种方法可以强制浏览器始终将这些元素保留在同一行。
<html>
<head>
<title>Test</title>
<style type="text/css">
#bodyFull {
}
#header {
border: 3px solid #f00;
background-color: #99F;
width: 900px;
}
#footer {
border: 3px solid #909;
background-color: #F99;
width: 900px;
}
#leftNav {
float: left;
width: 150px;
height: 800px;
border: 2px solid #777;
background-color: #FF9;
}
#bodyContent {
float: left;
border: 2px solid #707;
background-color: #AAA;
width: 1024px;
height: 1024px;
overflow: hidden
}
#mainBody {
width: 920px;
}
</style>
</head>
<body>
<div id="bodyFull">
<div id="header">
The Header
</div>
<div id="mainBody">
<div id="leftNav">
Left Nav
</div>
<div id="bodyContent">
The Body
</div>
The End of Main Body
</div>
<div style="clear: both"></div>
<div id="footer">
The Footer
</div>
</div>
</body>
</html>
小错别字:bodyContent 与 leftNav 位于同一行。
/*!!!此部分是否可以保留在与左侧导航相同的行中，即使它超出了“标题/正文”宽度 */
最佳答案
好吧，忘记我的margin-left建议，误解了问题。如果你想确保 div 总是，比方说，750px(这样加上左边的导航与标题的宽度相同)然后将其宽度设置为 750px 并设置 overflow: auto 以添加必要时页面该部分的滚动条，或 overflow: hidden 只是截断它。
关于Html 布局并使正文内容超出设置的宽度并保持在同一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1109528/