html - CSS 和 float 中的 float

Question

有谁知道如何在以下示例中并排放置两个重复元素:

.thumbnail {
  float: left;
  width: 30px;
  border: 1px solid #999;
  margin: 0 15px 15px 0;
}
.clearboth { clear:both; }


<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">

<!-- repeating element -->
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">

技巧是我已经在使用 float 和 clear 属性来单独设置每个重复元素的样式。但是当在 float 元素中嵌套 float 元素时，它不起作用。

jSFiddle

Answer 1

看看这个

<!-- repeating element -->
<div id="first">
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>    
<!-- repeating element -->
<div id="second">    
<div class="thumbnail">1A</div>
<div class="thumbnail">1B</div>
<div class="thumbnail">1C</div>
<br class="clearboth">
<div class="thumbnail">2A</div>
<div class="thumbnail">2B</div>
<div class="thumbnail">2C</div>
<br class="clearboth">
</div>

css 去

.thumbnail {
float: left;
width: 30px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.clearboth { clear:both; }

#first{float:left;}
#second{float:left;}