两个div;左边应该是固定的宽度，右边应填写的空间

休息我有下面的HTML代码：两个div;左边应该是固定的宽度，右边应填写的空间

<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开始，而我希望它在同一个垂直位置开始。

我确实找到了In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?，但是我无法将它应用到上面的HTML中。

来源

2010-10-26 CluelessAboutCSS

这里是一个链接，应用到你的代码：

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>

来源

2010-10-27 08:32:53 Ben

+1这是IMO的最佳方法。 IE6也能很好地工作。 – Mig 2010-10-27 08:35:15

谢谢。不幸的是，无论我做了什么，我都无法使其适应我的网站。任何方式你可以看看网站，并告诉我需要做什么（在CSS中）？ http://www.cpuforums.org – CluelessAboutCSS 2010-11-03 21:21:54

@无色 - 有一看，它真的很相同。在测试HTML中尝试我的示例，打破/修复一些东西，然后您就可以应用它。而且，也许你可以在完成后更改用户名;） – Ben 2010-11-04 00:08:35

两个div;左边应该是固定的宽度，右边应填写的空间

回答

相关问题