Question

我希望在页面的100％上有2个div，在2下面有一个div，页面有100个。像：

   ----------------
   | 1 |     2     |
   -----------------
   |       3       |
   -----------------

但这是捕获

Div 1：关于加载页面时添加的内容必须更宽或更长
div 2：必须取宽度。
div 3：必须始终低于1和2且其内容的含量为100％

当输入这个时我觉得最好用一个表来存储里面的div？

我想听听我如何做到这一点，或者更好地使用表格。

修改

忘了说我不想使用浮动因为它与div内的其他风格混淆分配。

Answer 1

我现在能想到的最好的是两张桌子，一张用于顶部，一张用于底部。重要的是设置

width:1%;
white-space:nowrap;

表格单元格应该更改其内容的大小（数字1）和colspan="2"表示应占用整个宽度的单元格。

您可以尝试将“变量文字”更改为更长更短的内容：

JSFiddle （更改后，您需要点击“运行”）

HTML：

<table>
    <tr>
        <td id="custom">Variable Text</td>
        <td>This takes up the rest</td>
    </tr>
    <tr><td colspan="2">This takes up the rest</td></tr>
</table>

CSS：

table {
    width:100%;
    text-align:center;
}
td {
    border:1px solid #000;
    padding:20px;
}
#custom{
    width:1%;
    white-space:nowrap;
}

Answer 2

您可以将其作为CSS表格，请参阅以下内容。

.wrap {
    display: table;
    width: 100%; /*full length*/
}
.d1, .d2 {
    display: table-cell;
    white-space: nowrap; /*no wrap in the cells*/
}
.d2 {
    width: 100%; /*it always receives all the remain length*/
}

/*demo purpose only follows*/
.d1 { background: red; }
.d2 { background: green; }
.d3 { background: blue; }

<div class="wrap">
    <div class="d1">1</div>
    <div class="d2">2</div>
</div>
<div class="d3">3</div>

小提琴演示： http://jsfiddle.net/t0sL1dck/

Answer 3

使用flexible boxes。设置一个缩小，两个增长以填充剩余空间。

＆＃13;

#container {
    display: flex;
}
#one {
    flex: 0 1 auto;
    background: white;
}
#two {
    flex: 1 0 auto;
    background: red;
}
#three {
    background: green;
}

＆＃13;

<div id="container">
    <div id="one">one</div>
    <div id="two">two</div>
</div>
<div id="three">three</div>

＆＃13;

使用前缀属性和JavaScript填充程序与older browsers兼容，作为读者的练习。

Answer 4

我提供了一个解决方案，在此解决方案中，您需要为第二个div提供最大宽度：

<div style='float:left;'>div1</div>
<div style='float:right;max-width:100px;'>div2</div>
<div style='clear:both;width:100%'>div3</div

我如何使用css或使用表格？

4 个答案: