Html 布局并使正文内容延伸超过设置的宽度并保持在同一行
我有一个包含页眉、页脚、正文内容的布局。 这是一个非常标准的布局。 我们的报告有时会超出硬编码宽度'但我们需要左侧导航和正文内容位于同一行。 使用下面的 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 位于同一行。
/* !!! 此部分是否可以与左侧导航保持在同一行，即使它超出了“标题/正文”宽度 */
I have a layout with header, footer, body content. It is a pretty standard layout. We have reports that sometimes extend past the hard coded width' But we need the left nav and the body content to the same line. With this HTML code below, if the width extends too far (say there is a content in the body that has more than 900+ width) then the body content flows below the left nav.
Basically, we want the content and left nav to remain on the same row regardless how much content is actually in that body content section. Is there a way to force the browser to keep those to items on the same row ALWAYS.
<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>
Small typo: bodyContent to rest at the same row as the leftNav.
/* !!! CAN THIS SECTION REMAIN ON THE SAME ROW AS THE LEFT Nav, EVEN THOUGH IT EXTENDS PAST THE 'HEADER/BODYFULL' width
*/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你把我之前说的都删掉吧，我误会你了。 尝试下面的代码，让我知道它是否是您正在寻找的。 否则，您将需要更具体地说明您的需求。 不过，您可能想查看一下液体布局，然后在其周围放置一个具有设定宽度的包装 div。
Scratch what I said before, I misunderstood you. Try out the code below and let me know if it is what you are looking for. Otherwise you are going to need be more specific what you need. However you might want to check out this liquid layout and then put a wrapper div around it with a set width.
好吧，忘记我的
margin-left建议，误解了问题。 如果您想确保 div 始终为 750px（这样加上左侧导航的宽度与标题相同），则将其宽度设置为 750px 并设置overflow: auto来添加必要时在页面的该部分添加滚动条，或者使用overflow:hidden将其截断。Ok, forget my
margin-leftsuggestion, misunderstood the problem. If you want to make sure that div is always, say, 750px (so that plus the left nav is the same width as the header) then set its width to 750px and set eitheroverflow: autoto add a scrollbar on that part of the page where necessary, oroverflow: hiddento just truncate it.