css - 如何将网格和边距均匀对齐到左右边缘

Question

原创

预计

• gird1 和 grid 4 应该对齐
• gird2 和 grid 5 应该对齐

更新

我稍微将你的宽度更改为 80%

似乎不太行。

蓝线长度应等于红线(左边距应等于右边距)

那些网格应该居中，

但现在他们似乎离左边

太近了

.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 等网格框架。