1

我正在尝试如何创建一个网站，该网站有 3 个单独的“层”（顶部导航，然后是内容，然后是页脚），每个层都有不同的背景图像，平铺到 100% 宽度......但我想要我的内容要居中（好像包含的 div 有 margin: 0 auto apply）。

到目前为止，我一直在尝试仅为背景图像创建 div，然后绝对定位我的内容 div，但允许它们自动居中。

但事实上，我正在从那里的文档“流”中取出元素，因此我的背景图像 div 最终会相互堆叠。

这真的很难解释，所以希望这个例子会有所帮助：

http://jsfiddle.net/RB46S/

如您所见，我有我的蓝色 div，背景延伸到 100%，但我希望我的导航和大图像在此处居中。

我的身体是绿色的，然后是一个 hp_content div，这将是我所有内容所在的位置，居中，这里的问题是你不能应用边距或填充值（我已经应用它们来显示它们不工作） ，只有父/浏览器顶部的位置，我相信这会导致我的网站响应时出现问题。

然后我有我的红色 div，它与顶部导航（蓝色）div 相同，它有 100% 的边框，但我希望页脚的东西（推特提要、最新的博客文章和联系方式）在此处居中。

希望有人理解我想要实现的目标并知道如何正确设置这样的页面，非常感谢任何帮助！

乔恩

4

2 回答 2

3

好的！尝试像这样构建您的 HTML：

<html>
<head></head>

<body class="index">

    <section class="top">
        <header class="content">
            <nav>
                <ul id="">
                    <li><a href="" id="">link 1</a></li>
                    <li><a href="" id="">link 2</a></li>  
                </ul>
            </nav>
        </header>
    </section>

    <section class="main">
        <div class="content">
            <h2>Whatever</h2>
            <div class="something">This is something else</div>
        </div>        
    </section>

    <section class="footer">
        <footer class="content">
            Footer content
        </footer>
    </section>

</body>
</html>​

然后是一些CSS，例如：

body, html{    
    width:100%;   
}

body {
    background: green;
}

body > section{
    width:100%;
}

/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
    display:block;
    margin:0 auto;
    width:400px;    
}

section.top {
    height: 510px;
    background: blue;
}

/* if you want to individually change widths for each section, do something like this:*/

section.top .content{
    width:100%;
}    

/* or not! */

section.main {
    height:200px;
}

section.footer {
    height: 400px;
    background: red;
}

玩转：http: //jsfiddle.net/FC2Ea/

因此，对于每个站点部分，您将拥有一个包含该部分所有内容的容器，该容器具有易于记忆的类名，例如“.content”。您可以将所有内容设置为相同的宽度，或者将每个部分的内容设置为不同的宽度，具体取决于您的目标。无论哪种方式，这些部分都将占据浏览器宽度的 100%。祝你好运！:)

​</p>

于 2012-10-17T16:29:07.377 回答
0

如果您在每个主 Div 中添加另一个 Div 并将样式用作

<div style="Width: 80%; float:right; margin-right: 150px;">

我想这可能在一定程度上有所帮助？

<div class="top_shade">  
    <div style="Width: 80%; float:right; margin-right: 150px;">      
    <header>
                <nav>
                    <ul id="">
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>     
                    </ul>
                </nav>
    </header>
    </div>
    </div>
于 2012-10-17T12:13:11.060 回答