css – 两个div左应固定宽度,右应填补空间

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

我找到了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。

解决方法

这是链接，适用于您的代码：

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 -->

工作相当不错！虽然IMHO，你不需要框架或身体(但我不知道总体规划)。那将是这样的：

<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>

css – 两个div左应固定宽度,右应填补空间

解决方法

相关文章