Как иметь левый поплавок и прямо вместе

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 на линию левой стороны

.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