我有一个页眉,页脚,正文内容的布局。这是一个非常标准的布局。我们的报告有时会超过硬编码宽度“但我们需要左侧导航栏和正文内容到同一行。在下面的HTML代码中,如果宽度延伸得太远(例如,主体中有超过900+宽度的内容),则主体内容会在左侧导航栏下面流动。Html布局,并有正文内容延伸超过设定的宽度,并保持在同一行
基本上,我们希望内容和左侧导航保持在同一行上,而不管该内容部分实际上有多少内容。有没有办法强制浏览器始终保持这些项目在同一行。
Test#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;
}
The Header
The Body
The End of Main Body
小错字:bodyContent与leftNav位于同一行。
/* !!!可以将此部分留在同一行左侧导航栏中,即使它延伸过“页眉/ BODYFULL”宽 */