Question

我一直在努力寻找合适的解决方案。

说你有6个div，所有不同的高度变化内容等。

在1080p屏幕的响应式设计中，所有6个div都适合一行......但是当页面变得足够小时，它会变为每行3个。

问题是说第二个div，是1,2,3 div中最高的，然后4 5和6 div被移出位置

意味着第4个div不会与第一个div一致（列式），你会如何实现？确保内容无论如何都能在正确的地方结束。

<style>
 #maincontent { width: 100%; }
 .content{ width: 33%; float:left;}
</style>

<div id="maincontent"> 
 <div class="content">a</div>
 <div class="content">I have a lot more content so i'm taller</div>
 <div class="content">a</div>
 <div class="content">I try to float left but can't get inline with the first child</div>
 <div class="content">a</div>
 <div class="content">a</div>
</div>

Answer 1

您可以使用clear属性：

此属性指示元素框的哪些边可能不   毗邻较早的浮箱。

＆＃39; none＆＃39;以外的值可能会引入许可。 [...]它   用于将元素垂直推过浮动。

.content:nth-child(3n + 1) {
  clear: left;
}

＆＃13;

.content {
  width: 33.3%;
  float: left;
}
.content:nth-child(3n + 1) {
  clear: left;
}

＆＃13;

<div id="maincontent">
  <div class="content">a</div>
  <div class="content">I have a lot more content so i'm taller</div>
  <div class="content">a</div>
  <div class="content">I try to float left but can't get inline with the first child</div>
  <div class="content">a</div>
  <div class="content">a</div>
</div>

＆＃13;

或者，有一个惊人的flexbox：

#maincontent {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
.content { width: 33.3%; }

＆＃13;

#maincontent {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
}
.content {
  width: 33.3%;
}

＆＃13;

<div id="maincontent">
  <div class="content">a</div>
  <div class="content">I have a lot more content so i'm taller</div>
  <div class="content">a</div>
  <div class="content">I try to float left but can't get inline with the first child</div>
  <div class="content">a</div>
  <div class="content">a</div>
</div>

＆＃13;

css和浮动div，所以他们不打破网格

1 个答案: