时间戳

首页 > 解决方案 > 包含行中的列

html - 包含行中的列

问题描述

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

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

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

标签： htmlcssflexboxgrid

解决方案

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

.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;在行上使用。

推荐阅读