Question

我有以下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。

Answer 1

以下是适用于您的代码的链接：

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>

两个div;左侧应固定宽度，右侧应填充其余空间

1 个答案: