css - CSS：3列布局，左侧动态全宽，中心和右侧自动内容宽度

Question

我需要做下一件事：

   max-width to center     content auto width    content auto width
<-----------------------><--------------------><-------------------->
          left                  middle                right

所以中间/中心列和右列将在里面有内容并且宽度会自动增长。但是左边的，我需要尽可能宽，直到捕捉到中间的。

我现在所拥有的，它是中间和正确的，带有“float：right”。剩下一个，带有“float：left”。

但是这样一来，左上角的宽度就受到了限制。

如何使其尽可能宽？

Answer 1

据我所知，这只能使用display: table. 如果我理解正确，这就是你想要的。它使 div 充当表格单元格，并将左侧的一个设置为 100% 的宽度，自动填充任何空闲空间。

Answer 2

让它们都向左浮动。这样它们都以最大宽度“倾斜”在左列上。

此外，您将需要一些宽度考虑或明确的条件..

这将为您清除很多

Answer 3

尝试这个：

http://jsfiddle.net/vcw7Q/

仅使用 50-24-24% 完成...

HTML

<div id="divLeft">
    div left to center
</div>    
<div id="divRight1">
    div right 1
</div>    
<div id="divRight2">
    div right 2
</div>    

CSS

#divLeft{
    width: 50%;
    display: inline-block;
    background-color: forestGreen;
}
#divRight1{
    width: 24%;
    display: inline-block;
    background-color: blue;
}
#divRight2{
    width: 24%;
    display: inline-block;
    background-color: red;
}