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

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

Answer 1

您已将高度2em指定给列，这会导致问题。

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

<强> CSS

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

Clearfix无法处理嵌套列

1 个答案: