0

如何使任意数量的 div 在包装 div 中水平并排站立，并确保它们填充整个页面宽度而不固定包装的 div 宽度（就像 html 表格列在将表格宽度设置为 100% 时的行为一样）？

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

谢谢

4

4 回答 4

1

这似乎有效。它使用 jquery，这使得它尽可能跨浏览器：

http://jsfiddle.net/AmnsD/

哇，所以不允许只链接到 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>
于 2012-10-24T21:35:01.320 回答
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>
于 2012-10-24T21:47:18.773 回答
0

我认为这可能是你正在寻找的：http ://umaar.github.com/css-flexbox-demo/

编辑：这是现在非常跨浏览器的悬停（不适用于 ie9-）

于 2012-10-24T21:38:02.343 回答
0

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

于 2012-10-24T22:04:35.137 回答