Question

这是我的codepen。 Here是我想要实现的目标。

请注意，即使缩小，有多个元素（导航菜单，标题图像，绿色div）在屏幕上居中，但也会延伸到屏幕的100％。

我如何实现这一目标？

<body>
<div class="wrapper">
    <header>
        <h1>Welcome to my site.</h1>
    </header>
    <section id="main">
        <h2>Lorem ipsum</h2>
        <p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="button"><a href="#">Learn More</a></p>
    </section>
    <aside>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </aside>
    <article>
        <div class="thumbnail"></div>
        <div class="content">
        <h2>This is just an article</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="button"><a href="#">Details</a></p>
        </div>
    </article>
    <article>
        <div class="thumbnail"></div>
        <div class="content">
        <h2>This is just an article</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="button"><a href="#">Details</a></p>
        </div>
    </article>
    <article>
        <div class="thumbnail"></div>
        <div class="content">
        <h2>This is just an article</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="button"><a href="#">Details</a></p>
        </div>
    </article>
    <footer>
        <p>Fancy footer</p>
    </footer>

</div>
</body>

body {
    background-color: #ededed;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
header {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #5C4868;
    color: white;
}
header h1 {
    margin: 5%;
    padding: 0;
}
#main {
    float: left;
    width: 75%;
    clear: left;
    margin: 0;
    padding: 40px 0 0 0;
}
.intro {
    width: 600px;
}
.button {
    border: 1px solid #c1c1c1;
    border-radius: 2em;
    text-align: center;
    display: block;
    float: left;
    width: 8em;
}
.button a {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #000;
    height: 2em;
    line-height: 2em;
}
aside {
    float: left;
    width: 20%;
    margin: 0;
    padding: 40px 0 0 0;
}
article {
    background-color: white;
    float: left;
    width: 100%;
    clear: left;
    margin: 20px 0px 0px 0;
}
.thumbnail {
    float: left;
    background-color: #5C4868;
    width: 450px;
    height: 400px;
}
.content {
    float: left;
    width: 470px;
    margin: 40px 0px 0px 40px;
}
article p {

}
footer {
    padding: 40px 0;
    margin-top: 20px;
    background-color: #141414;
    float: left;
    width: 100%;
    clear: both;
}
footer p {
    color: #4f4f4f;
    text-align: center;
}

Answer 1

如果我的理解是正确的，那么以下网址将对您有所帮助。 [工作jsfiddle] [1]

[1]: https://jsfiddle.net/antonysuthakarj/pjkrpzb1/

Answer 2

你的包装div围绕着你的所有内容，整个页面的宽度为960像素，包括背景。

你不应该把包装器放在div上，而不是放在div中。

例如你的标题：

<header>
    <div class="wrapper">
         <h1>Welcome to my site.</h1>
    </div>
</header>

这会将紫色背景拉伸到整个宽度，但它会将文本居中到960px的宽度。

我还建议您使用max-width的960px和width的100％，以便在较小的屏幕上调整大小。

如何使居中的div伸展到100％的屏幕？

2 个答案: