html - 固定宽度父级内的液体宽度

Question

我正在使用宽度为 960 像素的居中布局。在包装器中，我想要一个幻灯片，它是宽度 (浏览器宽度) 的 100%。

我怎样才能做到这一点？

<div id="wrapper"> //960px
    <div class="text"></div>
    <div class="text"></div>
    <div class="slider"> //100%
        Slider-content
    </div>
    <div class="text"></div>
</div>

提前谢谢你...:-)

Answer 1

div.slider 将已经是 100% 宽度，因为像 div 这样的 block 级元素已经水平扩展以填充其父级的所有空间除非另有规定。 div.text 也是如此。

如果您询问如何创建 960px 居中包装，这些技术是非常标准的。要么:

div#wrapper
{
    margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
    width: 960px;
}

或

div#wrapper
{
    left: 50%;             /* put left edge at 50% */
    margin-left: -480px;   /* move left edge back by 480px = half width.
                              this makes the center of #wrapper match center of page */
    position: absolute;    /* position: absolute makes the left: 50% line work */
    width: 960px;
}