CSS流体'列'

Question

什么是在CSS中获得这种布局的最佳方式？想象我在两个内部div中有三个div，两个div在另一个里面，第一个div有一个特定的宽度集合，第二个div有望占用剩下的空间。

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

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

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

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

这必须是一个完全的CSS的解决方案，不需要JavaScript frameworks-和理想的最常用的浏览器适用于以最小的“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

希望这至少可以帮助您开始：

* { 
    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% 
} 

的“包装”将是你的包裹格。我只将流体柱的宽度设置为60％，这样您就可以看到它应该流畅地起作用。我在Opera 10，IE 6和Firefox 3中测试了这个问题，只有很小的问题。如果您将流体列的宽度设置为100％，IE想要在右侧附加额外的200像素。我确信有一个地方可以解决这个问题。

Answer 3

您可以使用支持液柱的Emastic CSS Framework。这里Link是类似于你的“ASCII艺术作品”的工作示例:)

Answer 4

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

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