Question

我有一个宽度为1200像素的容器和4个宽度为250像素的直插式儿童。

无论如何，我可以在父母内部为他们辩护吗？例如，我希望第一个元素在左边没有边距，最后一个元素在右边没有边距，并且元素之间的边距相等。

Answer 1

在容器上使用display flex

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

有关更多详情，请参阅the spec

Answer 2

当然，使用flexbox：

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

在父级中对齐内联块元素

2 个答案: