Question

这就是我想要实现的目标。

enter image description here

我已经知道定位，居中和东西了。我在这里遇到的问题，以及我想问你们的问题是：最佳实践是什么？有一个居中的div，其中的所有内容都集中在一起＃＆＃ 39; s背景颜色是否超出页面的整个宽度始终保持居中？

事实上，这是一个超级普通的布局，我只是不知道＆＃34;思考＆＃34;的正确方法是什么？它

我是否应该将布局视为＆＃34;我制作一个宽度为1280像素的大盒子，以边距为中心：0自动;然后为这个div的背景做一些特别的事情 - 只有背景，内容应该留在原地 - 超过或者我应该创建像类一样的东西来以相同的方式居中每个元素但重复我的代码？

所以基本上，应该只在一个盒子里面而且div只在背景中超过，或者通过重复代码分别将所有内容分开来实际上更好吗？

请注意，网站没有响应，也不需要调整/缩放，而且浅灰色区域也是＆＃34; body＆＃34;因此，深灰色区域是页面中唯一应该超过的特殊情况。

Answer 1

我的建议：

我会为全宽度支持创建三个基本容器。然后在其中嵌套内容！

enter image description here

＆＃13;

        html, body{
            padding: 0;
            margin: 0;
            border: 0; /*ie older versions*/
        }
        header {
            background-color: antiquewhite;
        }
        section{
            background-color: ActiveCaption;
        }
        footer{
            background-color: aquamarine;
        }
        .inner-wrapper{
            max-width: 300px;
            margin: 0 auto;
            border-left: 1px solid black;
            border-right: 1px solid black;
            height: 80px; 
            text-align: center;
        }

        section .inner-wrapper{
            height: 200px;
        }

＆＃13;

         <header>
            <div class="inner-wrapper">
                <div>some content</div>
            </div>
        </header>
        <section>
            <div class="inner-wrapper">
                <div>some content</div>
            </div>
        </section>
        <footer>
            <div class="inner-wrapper">
                <div>some content</div>
            </div>
        </footer>

＆＃13;

这是一个绝对的基本但强大的布局，我多次使用它。通过媒体查询或使用百分比设置流畅地使其响应非常容易！

Answer 2

在我看来，你应该给身体或容器div background颜色属性，并且div为全宽和高度，然后在中间的div你应该给{{1}和特定的宽度，这就是我要做的，但这取决于你想要做什么，你最常见的方式是什么，以便你知道下次如何做到这一点，更快

使用#container div可以将子项拉伸到全宽度居中内容

2 个答案: