我不明白为什么第 1 项移动浮动右侧的浮动等等，
我写了一个小例子来解释：JSFiddle example
HTML：
简单的html结构
<div class="span12">
<div id="accordion">
<div class="item">
<div class="title">ITEM 1</div>
<div>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
<div class="item">
<div class="title">ITEM 2</div>
<div>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
<div class="item">
<div class="title">ITEM 3</div>
<div>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
<div class="item">
<div class="title">ITEM 4</div>
<div>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.</div>
</div>
</div>
<div class="clear"></div>
</div>
JS
我只是从 jQuery UI 激活手风琴
$('#accordion').accordion({
'header': '.title',
'active': false,
'collapsible': true
});
CSS
CSS 向右浮动 N+1，右侧每行 1 个手风琴，左侧每行 1 个
.span12{
width:100%
}
.span12 .item{
width:35%
}
.span12 .item:nth-child(odd){
float:left;clear:left
}
.span12 .item:nth-child(even){
float:right;clear:right
}
.span12 .clear{
clear:both
}