如果一个元素的高度更高，则向左浮动制动器

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>

如果一个元素的高度更高，则向左浮动制动器

Float left brakes if one elment has more height

html

css

css-float