我有以下HTML代码:
<body>
<div id="Frame">
<div id="Body">
<div id="Panel">Side panel, fixed width.</div>
<div id="Content">The rest of the content, should be dynamic width and fill up rest of space horizontally.</div>
</div>
<div id="Foot">
<div>FooBar.</div>
</div>
</div>
</body>
我正在尝试做的是使#Panel具有固定宽度(~200像素)并且在左侧,并且#Content紧靠#Panel的右边但是具有"动态"宽度并水平填充浏览器屏幕中的其余空间.我已经尝试了很多不同的东西,但是还没能让它工作 - 我得到的最远的是#Panel在左边,而#Content在#Panel和填充的右边剩下的空间,但#Content从#Panel开始,而我希望它从相同的垂直位置开始.
我确实发现在CSS中,如何获得左侧固定宽度列,右侧表使用宽度的其余部分？,但我无法将其应用于上面的HTML.
Ben*_*Ben 29
这是应用于您的代码的链接:
CSS
#frame { background:pink }
#panel { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot { background:cornflowerblue }
HTML
<div id='frame'>
<div id='body'>
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
</div><!-- End #body -->
<div id='foot'>
<div>FooBar.</div>
</div>
</div><!-- End #frame -->
效果很好!虽然,恕我直言,你不需要框架或身体(但我不知道总体规划).这看起来像这样:
<div id='panel'>
Side panel, fixed width.
</div>
<div id='content'>
The rest of the content, should be dynamic width and fill up rest of space
horizontally.
</div>
<div id='foot'>
<div>FooBar.</div>
</div>