CSS：在不放100％的情況下製作一個儘可能寬的列。

Question

我有一個三列div，我想適合頁面上沒有溢出第三列到下面的其他兩個。

前兩列不能超過200px，第三列必須至少爲280px。導致第三列變寬的原因是td標籤內有一些長句的表格。如果將文本包裝到另一行，則表格可以放置。

如果我把表的寬度設置爲100％，第3列溢出到1和2以下，所以我必須爲表格設置一個固定的寬度。這與我正在嘗試做的事情不符，這是爲了讓頁面自己變大。但我不能兩者都有。有什麼我可以做的嗎？

<div class="column1"> 
</div> 
<div class="column2"> 
</div> 
<div class="column3"> 
    <table width="300px"> <!- would like to put 100% --> 
    </table> 
</div> 

CSS

div.column1, div.column2 { 
    float: left; 
    max-width:280px; 
    padding: 5px; 
} 

div.column3 { 
    float: left; 
    min-width:280px; 
    padding: 5px; 
} 

.column3 table { 
    table-layout:fixed; 
    word-wrap:break-word; 
} 

.column3 td { 
    white-space: normal; 
    word-wrap:break-word; 
} 

Answer 1

您需要使用calc，如果你不想讓你的<div> s到包，那麼你就需要一個溢出容器。

HTML：

<div class="overflow"> 
<div class="column1"> 
    text and text and text and text 
</div> 
<div class="column2"> 
    cakes and cakes and cakes and cakes 
</div> 
<div class="column3"> 
    <table width="300px"> 
     <tr><td>pie</td><td>foo</td><td>bar</td></tr> 
     <tr><td>left</td><td>center</td><td>right</td></tr> 
    </table> 
</div> 
</div> 

CSS：

*{ 
    padding:0; 
    margin:0; 
} 
div.overflow{ 
    min-width:700px; 
} 
div.column1, div.column2 { 
    float: left; 
    max-width:200px; 
    padding: 5px; 
    background-color:red; 
} 

div.column3 { 
    float: left; 
    min-width:280px; 
    padding: 5px; 
    background-color:blue; 
    width:calc(100% - 410px); 
} 

.column3 table { 
    table-layout:fixed; 
    word-wrap:break-word; 
    width:100%; 
} 

.column3 td { 
    white-space: normal; 
    word-wrap:break-word; 
} 

http://jsfiddle.net/BbJW9/

Answer 2

我認爲有多種方法。這裏是一個FIDDLE，它使用表格單元格作爲列。

FIDDLE

這是否對你的工作？

CSS

.cols { 
    display: table-cell; 
    overflow-x: wrap; 
} 

.left { 
    min-width: 10px; 
    max-width: 200px; 
    height: 200px; 
    background-color: red; 
    color: white; 
} 
.middle { 
    min-width: 10px; 
    max-width: 200px; 
    height: 200px; 
    background-color: white; 
} 
.right { 
    min-width: 280px; 
    height: 200px; 
    background-color: blue; 
    color: white; 
}