浮動左制動器如果一個elment具有更高度

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>