Clearfix 不适用于嵌套列

Question

我正在尝试在我的 CSS 项目中定义一些行和列，并且一切正常，除非视口很小。为了帮助您理解我的问题，我 have this pen。这是代码：

HTML:

<div class="row">
  <div class="column column-4"></div>
  <div class="column column-4">
    <div class="row">
      <div class="column column-6"></div>
      <div class="column column-6"></div>
    </div>
  </div>
  <div class="column column-4"></div>
</div>

风格：

.row, 
.column {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    float: left;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 500px) {
    .column + .column {
        margin-left: 1.6%;
    }

    .column-1 {
        width: 6.86666666667%;
    }

    ...

    .column-12 {
        width: 100%;
    }
}

[class*="column"] {
    background-color: grey;
    height: 2em;
}

[class*="column"] [class*="column"] {
    background-color: blue;
}

如您所见，我有一行三列，第二列有嵌套列。一切正常，但是当 windows 足够小时，只显示三行，而不是四行（两个主列和两个嵌套列）。最后一列绘制在最后一个嵌套列之上。我该怎么做才能解决这个问题？

Answer 1

您为您的列指定了 2em 的高度，这是导致问题的原因。

理想情况下，您不应将固定高度应用于列，因为内容可能因列而异。但是，如果这是您的要求，那么在您的媒体查询中，您可以进行以下 CSS 修改。

CSS

@media only screen and (min-width: 500px) {
  [class*="column"] {
    background-color: grey;
    height: auto;
    min-height: 2em;
  }
}

Clearfix 不适用于嵌套列

Clearfix not working on nested columns

html

css

grid

clearfix