两个div左边应该是固定宽度，右边应该填充剩余空间 [英] Two divs; left should be fixed width, right should fill rest of space
问题描述
我有以下HTML代码：
I've got the following HTML code:
<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，而我想它开始在相同的垂直位置。
What I'm trying to do is make it so that #Panel is of a fixed width (~200 pixels) and on the left hand side, and that #Content is immediately to the right of #Panel but is of "dynamic" width and fills the rest of the space in the browser screen horizontally. I've tried a lot of different things but haven't been able to get it working -- the farthest I've gotten is to the point where #Panel is on the left and #Content is to the right of #Panel and fills of the rest of the space, but #Content starts below #Panel whereas I'd like it to start at the same vertical position.
我发现在CSS中，如何获取一个左侧的固定宽度的列与右侧的表使用其余的宽度？，但我不能应用于上面的HTML。 p>
I did find In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?, however I wasn't able to apply it to the HTML above.
推荐答案
这里的链接应用于您的代码：
Here's that link, applied to your code:
p>
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 -->
工作得很好！虽然，恕我直言，你不需要框架或身体（但我不知道总计划）。这将是这样：
Works pretty well! Although, IMHO, you don't need the frame or body (but I don't know the master plan). That would look like this:
<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>
这篇关于两个div左边应该是固定宽度，右边应该填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
