html - 漂浮的方 block 落入

Question

如何阻止 float block 坍塌？他们掉下来……我不想设置具体的高度，因为这样不方便。

我需要一个 float 解决方案。不灵活。使用 flex 会非常简单 =)

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

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

Answer 1

编辑

如果您关心的是宽度而不是高度，您可能想要创建具有固定宽度的不同“列”容器，将它们向左浮动，并使用 javascript 在它们之间分配您的“ block ”，这样您会得到一个结果是这样的:

 
.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>