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。

小提琴

这个对你有用吗?

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;
}