Question

我设法用包装器将我的2列布局居中。我也想以某种方式使它响应，所以我考虑使用最小和最大宽度值。但是一旦我插入它们，布局就会中断并且不再居中。

有什么建议吗？或者我应该寻找一种完全不同的方法？

这是基本的HTML：

<body>
<div id="wrapper">
    <div id="content">
        <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div id="sidebar">
        <div id="sidebarfix">
            <nav>
                <li><a class="navlink"; href="">Link 1</a></li>
                <li><a class="navlink"; href="">Link 2</a></li>
                <li><a class="navlink"; href="">Link 3</a></li>
                <li><a class="navlink"; href="">Link 4</a></li>
            </nav>
        </div>
    </div>
</div>

这就是CSS：

body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}

#wrapper {
width: 600px;
padding: 0;
margin: 0 auto;
}

#content {
background-color: #FFFFFF;
width: 300px;
float: left;
position: relative;
padding: 0 2.5em 0 2.5em;
margin: 0;
}

#sidebar {
width: 200px;
float: right;
text-align: center;
background-color: #FFFFFF;
padding: 0;
margin: 0 0 0 5px;
}

#sidebarfix {
background-color: #FFFFFF;
width: 200px;
position: fixed;
padding: 0;
margin: 0;
}

到这里寻找完整的JSFiddle：https://jsfiddle.net/timothys_monster/0db4sL6d/12/

Answer 1

我建议使用bootstrap，它的格栅框架并节省大量时间。但是如果你想自己写它，那么它很大程度上取决于你想要制作什么样的布局。如果你想制作标准的盒装布局，你可以简单地给身体固定宽度

喜欢

body {width: 860px; background-color: black; margin: 0px auto;}
html {background-color: white;}

然后您可以使用％width，也可以使用@media screen。但最好的方法是简单添加Bootstrap。

Bootstrap
Media rule

如何将最小宽度和最大宽度与包装器结合使用？

1 个答案: