html - 如何让任意数量的 div 水平并排放置并平均划分整个页面宽度？

Question

我怎样才能让任意数量的 div 在包装 div 中水平并排站立，并确保它们填满整个页面宽度而不固定包装的 div 宽度(就像 html 表格列一样将表格宽度设置为 100% 时的行为？

并且尽可能跨浏览器...

谢谢

Answer 1

这有点作弊，但您可以像这样使用 display:table-cell 来实现；

<style type="text/css" media="screen">
    body {
        margin:0;
        padding:0;
    }

    #wrap {
        background:black;
        display:table;
        padding:10px 0;
        width:100%;
    }
    .box {
        height:100px;
        display:table-cell;
    }

    .a {
        background:red;
    }

    .b {
        background:blue;
    }

    .c {
        background:green;
    }

    .d {
        background:yellow;
    }
 </style>

和 HTML 一样；

<div id="wrap">
    <div class="box a">a</div>
    <div class="box b">b</div>
    <div class="box c">c</div>
    <div class="box d">d</div>
</div>