浮动的块落在

Question

如何阻止浮动块崩溃？它们倒下了......我不想设置一个特定的高度，因为这不方便。

我需要一个浮动解决方案。不弯曲。使用flex，这将非常容易=）

＆＃13;

＆＃13;

.block {
  position: relative;
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  width: 40%;
  float: left;
  margin: 2px;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

＆＃13;

<ul class="parent">
  <li class="block">
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p>
  </li>
  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

修改

如果你关心的是宽度而不是高度，你可能想要创建固定宽度的不同“列”容器，将它们向左浮动，并使用javascript在它们中分发你的“块”，这样你就得到一个结果如下：

 
.column {
  width: 40%;
  float:left;
}
.block {
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  margin: 2px;
}

.parent {
  margin: 0;
  padding: 0;
}

<div class="parent">
  <section class="column">
    <article class="block">
      <p>fadsfa sd assasa sasdf aasdf fa sdfasd fasdsd fasd fa</p>
    </article >
    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >
  </section>
  <section class="column">
    <article class="block">
      <p>ads fa sdfasd fasfasd fasdfads faasdfasdfasdf asdfasdf asdf asdfasdf  sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

    <article class="block">
      <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

    </article >

  </section>
</div>

Answer 2

我猜你在这里的问题是你要清除每个奇怪的孩子并且不希望它与身高相同。因此，使用float时最简单的解决方案是使用（2n + 1）选择器清除每个奇数子项。

＆＃13;

＆＃13;

.block {
  position: relative;
  background: lightblue;
  border: 3px solid #5fb3ce;
  padding: 15px;
  width: 40%;
  float: left;
  margin: 2px;
}

ul {
  margin: 0;
  padding: 0;
}
ul>li:nth-child(2n+1){
  clear: left;
}

li {
  list-style: none;
}

＆＃13;

<ul class="parent">
  <li class="block">
    <p>fadsfa sd fa sdfasd fasdsd fasd fa</p>
  </li>
  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>ads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

  <li class="block">
    <p>fadsfa sd sdfasd fasdfads fa sdfasd fasdfads fa sdfasd fasfasd fasdfads fa sdfasd fasfasd fasdsd fasd fa</p>

  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;