如何将网格和边距平均对齐到左右边缘

Question

原始

预期

• gird1和网格4应该对齐
• gird2和网格5应对齐

更新

我略微将你的宽度改为 80％

似乎没有效果。

blug line 长度应等于红线（左边距应等于右边距）

那些网格应该居中，

但现在它们似乎太接近左

.container {
    position: relative;
    width: 80%;
    margin: 0 auto;
}    
.box {
    float: left;
    width: 160px;
    height: 80px;
    background: #ccc;
    margin: 20px;
}

Answer 1

很简单。您在包装容器中创建您的盒子。这是一个非常简单的例子，宽度很宽（不理想）：

http://jsfiddle.net/ztpftp1p/

.container {
    position: relative;
    width: 600px;
    margin: 0 auto;
}

.box {
    float: left;
    width: 160px;
    height: 80px;
    background: #ccc;
    margin: 20px;
}

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
</div>

更好的方法是使用百分比和盒子大小来实现。如果需要，我可以为你编写，或者你可以使用像bootstrap或foundation这样的网格框架。