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

CSS和浮动内部浮动

1 个答案: