Clearfix不处理嵌套列

Question

我试图在我的CSS项目中定义一些行和列，所有这些都运行得很好，除非视区很小。为了帮助你理解我的问题，我拿着这支笔。这是密码：

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

如您所见，我有一个一行，有三个列，第二个列有嵌套列。所有这些都可以工作，但是当窗口足够小时，只显示三行，而不是四行(两个主列和两个嵌套的)。最后一列是在最后一个嵌套列上绘制的。我能做些什么来解决这个问题？

Answer 1

你已经给了你的列2em的高度，这导致了这个问题。

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

CSS

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