Question

如何让任意数量的div在包装div中水平并排放置，并确保它们填充整个页面宽度而不修复包装的divs宽度（与html表列完全相同）将表格宽度设置为100％时的行为？

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

由于

Answer 1

这似乎有效。它使用jquery，它使其成为可交叉的浏览器：

Aww，SO不允许只链接到jsfiddle：所以这是例子：

<style>
.inner1{background-color:#FF0000;float:left;height:25px;}
.inner2{background-color:#00FF00;float:left;height:25px;}
.inner3{background-color:#0000FF;float:left;height:25px;}
.inner4{background-color:#FFFF00;float:left;height:25px;}
</style>

<script>
$(document).ready(function(){
    $('#outer').children().each(function(index){
        $(this).css('width',100/$('#outer').children().length + '%');
    });
});
</script>

<div id="outer">
    <div class="inner1">
        &nbsp;
    </div>
    <div class="inner2">
        &nbsp;
    </div>
    <div class="inner3">
        &nbsp;
    </div>
    <div class="inner4">
        &nbsp;
    </div>
</div>

Answer 2

这有点像作弊，但你可以使用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>

Answer 3

我认为这可能就是你要找的东西：http://umaar.github.com/css-flexbox-demo/

编辑：这是现在非常跨浏览器（在ie9中不起作用）

Answer 4

您的问题将通过响应式网页设计和媒体查询来解决。

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

4 个答案: