Question

我想弄清楚我将如何创建一个网站，该网站有3个独立的“图层”（顶部导航，然后是内容，然后是页脚），每个网站都有不同的背景图片，平铺到100％宽度......但我希望我的内容居中（好像包含的div有边距：0自动应用）。

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

但是对于科西嘉，我正在从文档的“流程”中取出元素，因此我的背景图像最终会相互叠加。

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

http://jsfiddle.net/RB46S/

正如你所看到的，我有我的蓝色div，背景延伸到100％但是我想要我的导航和一个大图像到这里居中。

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

然后我的红色div与顶部导航（蓝色）div相同，它有100％的边框，但我希望页脚的内容（Twitter提要，最新的博客文章和联系方式）在这里居中。

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

乔恩

Answer 1

确定！尝试构建这样的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/

因此，对于每个网站部分，您都拥有一个容器，可以容纳所有该部分内容，其中包含一个易于记忆的类名，例如＆＃34; .content＆＃34;。您可以将所有内容设置为相同的宽度，或将每个部分的内容设置为不同的宽度，具体取决于您的目标。无论哪种方式，这些部分将占据浏览器宽度的100％。祝好运！：）

Answer 2

如果您在每个主要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>

布局与连续的背景图像，但居中的内容？

2 个答案: