家長有理的行內塊元素

Question

我有一個寬度爲1200px的容器和4個每行寬度爲250px的內聯塊兒童。

無論如何，我可以證明他們內部的父母？例如，我希望第一個元素的左邊沒有空白，最後一個元素的右邊沒有空白，並且元素之間的邊距相等。在容器上

Answer 1

使用顯示器撓性

.container { 
    display:flex; /* make the container a flex container */ 
    justify-content: space-between /* justify the flex items on the main axis */ 
} 

更多detials

Answer 2

當然，利用Flexbox，就見the spec：

HTML

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS

.parent{ 
    display:flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 

瞭解更多關於flexbox

你還可以嘗試：

HTML同上

CSS

.parent{ 
    display:table 
} 

.parent > .child{ 
    display: table-cell; 
    float: none; 
}