html - 如果一个元素具有更高的高度，则 float 左刹车

Question

所需的输出是:

但我无法设置元素的高度，因为有些元素的内容较多，而另一些元素的内容较少。

这就是我得到的:

片段

.wrap {
  width: 400px;
}

.inner {
  width: 80px;
  border:solid 2px lime;
  margin: 5px;
  float:left;
}

<div class="wrap">
  <div class="inner"><h1>1</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>2</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>3</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>4</h1>blubby blubby bluuublubby blubby bluuu</div>
  <div class="inner"><h1>5</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>6</h1>blubby blubby bluuublubby blubby bluuu</div>
  <div class="inner"><h1>7</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>8</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>9</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>10</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>11</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>12</h1>blubby blubby bluuu</div>
</div>

<强> Fiddle

如何解决？

Answer 1

改用display:inline-block

.wrap {
  width: 400px;
}

.inner {
  width: 80px;
  border:solid 2px lime;
  margin: 5px;
  display:inline-block;
  vertical-align:top
    
}

<div class="wrap">
  <div class="inner"><h1>1</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>2</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>3</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>4</h1>blubby blubby bluuublubby blubby bluuu</div>
  <div class="inner"><h1>5</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>6</h1>blubby blubby bluuublubby blubby bluuu</div>
  <div class="inner"><h1>7</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>8</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>9</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>10</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>11</h1>blubby blubby bluuu</div>
  <div class="inner"><h1>12</h1>blubby blubby bluuu</div>
</div>