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这样的块级元素已经水平扩展以填充其父级空间，除非另有说明。 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;
}

Answer 2

如果slideshow为960px且wrapper为100％，您可能需要查看在wrapper div之外添加slideshow div的方法浏览器宽度。

通常情况下，slideshow div中wrapper div的绝对定位不会影响其容器（wrapper）div的尺寸，但是您在控制中心时会失去一些控制权（ slideshow）div。

Answer 3

我建议将#wrapper更改为.wrapper，以便您可以在页面后面重用您的包装器类。然后，我推荐以下标记：

<div class="wrapper"> //960px
  <div class="text"></div>
  <div class="text"></div>
</div><!-- end .wrapper -->

<div class="slider"> //100% of browser viewport
  Slider-content
</div><!-- end .slider -->

<div class="wrapper"> //960px
  <div class="text"></div>
</div><!-- end .wrapper -->

Answer 4

解决方案非常简单。

如何将DIV（固定宽度DIV）设置为浏览器的宽度。

<强> HTML：

<div id="wrapper"> //960px
    <div class="slider"></div> //100% of browser width
</div>

<强>
CSS：

.slider {
    position: absolute; 
    width: 100%;
    left: 0px;
}

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

4 个答案: