html - CSS:在不放置 100% 或导致换行的情况下使列尽可能宽。

Question

我有一个三列的 div，我希望它适合页面而不溢出第三列到其他两列下方。

前两列不能超过 200 像素，第三列必须至少为 280 像素。导致第三列变宽的原因是一个表格，其中 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/