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屬性來分別設置每個重復元素的樣式。 但是，當將浮動元素嵌套在浮動元素中時，它將不起作用。

的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;}