css - Html5 3列布局

Question

我的网站在第 3 列有问题。我希望它是仅左右为空的中心内容。如何在不使用左边距的情况下将中心列设置为居中？如何为中心列设置最大宽度，以便内容不会超过右列？

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <div id="content1">

        </div>
        <div class="right"></div>
    </div>
</div>

.wrapper {
    display:block;
}

.left, .center, .right {
    margin:0 10px;
}

.left {
    float:left; 
    width:180px;
    position:fixed;
}

.center {
    float:left;
    width:880px;
    margin-left:200px;
}

.right{
    float:left;
    width:180px;
    position:fixed;
}

Answer 1

有很多方法可以做到这一点。你可以使用类似960 Grid System的东西，或者尝试使用 CSS flexbox，这非常好，但目前并非所有浏览器都支持，afaik！

对您的代码：为什么使用位置：固定？您的代码应该可以工作，请尝试将其删除。并在包装器 div 上将溢出设置为自动。

作品：http ://codepen.io/doodlebunch/pen/vGxol

.wrapper { 
  display:block; 
  overflow: auto;
}

.left { 
 float:left; 
 width:180px;
}

.center { 
 float:left;
 width:880px;
 margin: 0 10px;
}

.right{ 
  float:left;
  width:180px;
}

如果您想将 .left 和 .right 留空，您可以删除它们并添加 margin: 0 auto; 到您的 .content-div。

.content { 
 width:880px;
 margin: 0 auto;
}