如何對齊網格和利潤率左，右邊緣同樣

Question

原始

預計

• gird1和電網4應該對齊
• gird2和電網5應該對齊

更新

我稍微改變了你的寬度80％

好像沒有工作WEEL。

的BLUG線長度應該等於紅線（左邊距應等於右邊緣）

這些網格應居中，

但現在他們似乎太接近左

.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>

的更好的方式是用百分比和箱尺寸做到這一點。如果需要，我可以爲你寫，或者你可以使用像引導程序或基礎的網格框架。