如何有浮動左，右在一起

Question

我不明白爲什麼花車多的第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 
} 

Answer 1

然後使下拉絕對。

.item { position: relative; } 
.ui-accordion-content { position: absolute;top: 100%; left: 0; z-index: 5; } 

Updated JSFiddle