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

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/css/218854.html

猜你在找的CSS相关文章