中心div为100%宽度的div

时间:2012-11-22 05:37:41

标签: html css

这就是我所拥有的:

http://jsfiddle.net/kRUBY/

<style>
div.box {
    width:400px;
    height:200px;
    float:left;
}
</style>

<div style="width:100%; height:200px; overflow:hidden;">

    <div style="width:2000px; height:200px;">
        <div class="box" style="background:red;"></div>
        <div class="box" style="background:blue;"></div>
        <div class="box" style="background:yellow;"></div>
        <div class="box" style="background:orange;"></div>
        <div class="box" style="background:black;"></div>
    </div>

</div>

当页面调整大小时,我希望2000px div的内容保持居中,因此黄色div始终位于屏幕中间。

是否可以仅使用css执行此操作?

2 个答案:

答案 0 :(得分:7)

<div style="width:100%; height:200px; overflow:hidden;">
    <div style="width:2000px; height:200px;position: relative; left: 50%; margin-left: -1000px">
        <div style="width:400px; height:200px; float:left; background:red;"></div>
        <div style="width:400px; height:200px; float:left; background:blue;"></div>
        <div style="width:400px; height:200px; float:left; background:yellow;"></div>
        <div style="width:400px; height:200px; float:left; background:orange;"></div>
        <div style="width:400px; height:200px; float:left; background:black;"></div>
    </div>
</div>​

Here's the link

答案 1 :(得分:0)

margin: auto;放入您的2000px div