将多个DIV拉伸至100％宽度的父级

Question

我想将3个DIV置于包装DIV中心。重点是那些DIV会单独拉出它们的WIDTH，这样它们就可以一起匹配100％的包装纸宽度。

HttpPost

有人知道这是怎么做到的吗？谢谢你的帮助。

Answer 1

你可以使用CSS表格布局，浏览器支持很棒 - IE8 + 。

的 JSFIDDLE DEMO

＆＃13;

＆＃13;

.wrapper {
    display: table;
    border-collapse: collapse;
    /* table-layout: fixed; */
    width: 100%;
}
.wrapper > div {
    display: table-cell;
    border: 1px solid red;
}
@media (max-width: 480px) {
    .wrapper > div {
        display: block;
    }
}

＆＃13;

<div class="wrapper">
    <div>Content1</div>
    <div>Content2</div>
    <div>Content3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意.wrapper { table-layout: fixed; }适用于相等宽度的单元格。

Answer 2

如果你采用flexbox方法，你的CSS可能就是这么简单：

.wraper{
    display:flex;
}
.wraper > div{
    width:100%;
}

以下是演示<{p>的Fiddle