如果一个元素有更高的高度，则浮动左刹车

Question

The desired output is:

But I can NOT set height to the elements cause some have more and other have less content.

This is what I get:

Snippet

 .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

How to fix it?

Answer 1

use display:inline-block instead

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