0

我一直使用全局包装器来保持我的布局 960px 并将我的所有内容包含在包装器内。我正试图摆脱这一点，而是让我所有的“部门”（如刊头、导航、滑块、content_area）看起来像这样：

 // CSS:
 .container {
            width: 960px;
            margin: 0 auto;
        }

        #masthead {
            width: 100%;
            background: #000;
        }

        #navigation {
            width: 100%;
            background: red;
        }

        #slider {
            width: 100%;
            background: grey;
        }

 // HTML:
 <div id="masthead">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>
 <div id="navigation">
        <div class="container">
            <!-- navigation content goes here -->
        </div>
 </div>
 <div id="slider">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>

首先，我不相信这是实现最终结果的唯一方法（或者可能是最好的方法）。尽管这很有效，并且我能够更好地设置我的各个部门的样式，并且仍然限制内容的宽度和“位置”，但我真的很重视如何在没有过多容器类的情况下实现上述目标。

我的第二个问题，更具体地说，我寻求建议的原因在于我现在正在使用的项目中，我没有用于上面滑块的“容器”。我希望我的幻灯片是全屏的（所以实际上幻灯片是从屏幕的边缘）到页面的中心位置。我仍然希望我的幻灯片宽度为 960 像素或不超过该宽度，但是当滑入以定位在“滑块”div 的中心时。

我正在使用的插件叫做 LayerSlider，它允许我在每张幻灯片上都有“层”，可以从不同的方向滑入到幻灯片的最终位置。（此处示例：LayerSlider 全屏预览）。

每个幻灯片元素都是绝对定位的，您必须使用“left”和“top”指示幻灯片层将在动画之后定位的位置。

我已经设法使用“left: 50%; top: 5%”使内容“居中”，但是当我调整浏览器的大小时，元素会移动到不合适的位置。

我希望我是有道理的，希望有人可以帮助我如何在全宽 div 中定位元素，并且无论用户分辨率如何，它看起来仍然相同。

4

2 回答 2

0

只要您不想在包装器上设置背景，就不需要一个来包含您的内容并使其居中。您可以通过将该样式直接应用于body：

HTML

<nav>
  hi i am the navigation
</nav>
<footer>
  hi i am the footer
</footer>​

CSS

html {
  width: 100%;
}
body {
  border: 1px solid #ddd;
  width: 50px;
  margin: 0 auto;
}​

在 JSFiddle 上查看

于 2012-12-28T19:25:20.440 回答
0

找不到任何其他解决方案，坚持我所知道的:)

于 2013-01-21T15:54:16.683 回答