家长有理的行内块元素

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; 
}