Question

什么是在CSS中获得此布局的最佳方式？想象我有两个div，两个内部div中的另一个div，第一个具有特定的宽度设置，第二个div预计会占用剩余的空间。

通常我最终会在第二列上设置一个特定的宽度，并在包含div宽度改变的最后管理更新。

如果我浮动固定而不是流体，流体柱将包裹在固定的div下面（不是想要的）。

+-------+  +--------------------------------------+
| fixed |  |                                      |
+-------+  |               fluid                  |
           |                                      |        
           |                                      |
           +--------------------------------------+

<div>
  <div>fixed</div>
  <div>fluid</div>
</div>

这必须是一个完全css的解决方案，没有javascript框架 - 理想情况下适用于最常用的浏览器，并且最少有“hackage”（如果有的话）。

希望ASCII艺术有效，

感谢。

Answer 1

标记

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

css

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

这应该可以解决问题。我在我的个人网站上使用它。利润率使它保持在同一水平。

Answer 2

您可以使用支持流体列的Emastic CSS Framework。这里Link的示例与您的“ASCII艺术作品”类似：）

Answer 3

希望这至少可以帮助您入门：

* {
   margin:0;
}

div#wrapper {
   margin:0;
   height:auto !important; //IE Hack
   height:100%; //IE Hack
   min-height:100%;
   overflow:auto
}

div#fixed{
   float:left;
   position:absolute;
   background-color:red;
   margin:0;
   height:200px;
   width:200px
}

div#fluid{
   float:right;
   position:absolute;
   left:200px;
   background-color:blue;
   display:block;
   height:80%;
   width:60%
}

“包装”将是你的包装div。我只将流体柱设置为60％的宽度，这样你就可以看到它应该流畅地起作用。我在Opera 10，IE 6和Firefox 3中测试了这个，只有很小的问题。如果将流体柱的宽度设置为100％，IE想要向右追加200px。我确定在某处可以解决这个问题。

Answer 4

实际上有一个更简单的解决方案，这是我不久前发现的。适用于IE7。 #fluid div将在固定修复旁边向上滑动并占用剩余空间，同时保持所有响应站点的流动性。

#fixed{
     width:200px;
     float:left;
}
#fluid{
    overflow:hidden;
}

CSS流体'专栏'

4 个答案: