Question

我刚开始制作HTML，我需要一个宽度为100%的容器和一个980px且中心对齐的包装器。我只是在JSFIDDLE中粘贴了我的代码。代码有什么问题？

#section-1{
    background: #f7f3ed;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    position: relative;
    padding: 30px 0 100px 0;
    border: 2px solid red;
}
#section-1 h2{
    font-size: 32px;
    font-family: 'Helvetica Neue';
    margin-bottom: 20px;
}
.wrapper-1{
    text-align: center;
    width: 980px;
    background: #fff;
    border: 2px solid blue;
    position: relative;
}

<div id="section-1" class="wrapper-1">
        <h2>Hey this is just a test</h2>    
        </div>

JS FIDDLE

Answer 1

如果你想要100％的宽度，你的＃section-1不应该有max-width:1300px;，所以删除它。

或者不是，如果你想要那样的话。真正重要的是以下内容。

您的.wrapper-1应该有margin:0 auto;

这使您的.wrapper-1 div水平居中。

此外，您的HTML应该是

<div id="section-1">
    <div class="wrapper-1">
        <h2>Hey this is just a test</h2>    
    </div>
</div>

Answer 2

您只有一个元素，您同时指定了一个ID和一个类。你需要一个部分，并在该部分内部包装如下：

<div id="section-1">
    <div class="wrapper-1">
        <h2>Hey this is just a test</h2>
    </div>
</div>

为了演示，我将宽度更改为包装器的280px，将其更改为您想要的任何内容。要水平居中块元素，您需要为它们提供一个自动边距：

.wrapper-1{
    text-align: center;
    width: 280px;
    background: #fff;
    border: 2px solid blue;
    position: relative;
    margin: 0 auto;
}

See the working fiddle

Answer 3

这是一个相当标准的问题。你想要一个包装器和一个容器，但你试图用同一个div做两个。你需要1个div用于容器，1个div用于包装。

这是一个解决方案（小心“宽度：100％”和边框）： http://jsfiddle.net/9tzNu/3/

<div id="container">
       <div id="wrapper">
        <h2>Hey this is just a test</h2>    
    </div>
</div>

#container{
    background: #f7f3ed;
    max-width: 1300px;
    margin:0 auto ;
    padding: 30px 0 100px 0;
}

#wrapper{
    text-align: center;
    width: 980px;
    background: #fff;
    border: 2px solid blue;
    margin:0 auto ;
}

这里有标准模式，可以帮助您启动项目： http://www.alsacreations.com/static/gabarits/liste.html

基本div;容器和包装

3 个答案: