包含行中的列答案

【问题标题】：Containing columns in row包含行中的列
【发布时间】：2018-11-17 10:12:21
【问题描述】：

我创建了三列，我想将它们包含在一行中，然后包含在一个部分中。

由于某种原因，三列不能正确包含在行内，是否有更好的方法或我在代码中遗漏的东西来纠正这个问题？

.column-1-3 {
  width: 29.666%;
  margin-right: 5.5%;
  float: left;
}

.column-last-child {
  margin-right: 0!important;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}

<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3 column-last-child">
      <div class="video-post"></div>
    </div>
  </div>
</div>

【问题讨论】：

您面临的具体问题是什么？
代码运行良好。您需要什么帮助？
您需要在容器上应用浮动清除，这就是容器高度为 0 的原因。最近你会丢弃 float 并发现很多有用的 display: flexbox 而不是使用奇数边距值
感谢您的建议。

标签： html css flexbox grid

【解决方案1】：

在行上添加display: flex;，并从column-1-3 中删除float 属性：

.column-1-3 {
  width: 30%;
}

.section {
  width: 100%;
  margin: 40px 0;
  padding: 40px 0;
  position: relative;
}

.row {
  display: flex;
  width: 80%;
  max-width: 1080px;
  min-width: 414px;
  margin: auto;
  justify-content: space-between;
}

.post {
  width: 100%;
  height: auto;
  position: relative;
  background: #000;
  padding: 50px;
}

.video-post {
  background: #000;
  height: 300px;
  width: 100%
}

<div class="section">
  <div class="row">
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
    <div class="column-1-3">
      <div class="video-post"></div>
    </div>
  </div>
</div>

您也不需要将margins 设置为flex。只需在列上保留width: 30%，在行上使用justify-content: space-between;。

【讨论】：

您也不需要使用 flex 设置边距。只需保留 30% 的列宽并使用 justify-content: space-between;在行上
完美，为我节省了很多时间。再次感谢。