如何有浮动左，右在一起

我不明白为什么花车多的第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>

我刚活性手风琴从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 
}

来源

2013-08-16 Annhydrium

然后使下拉绝对。

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

Updated JSFiddle

来源

2013-08-16 20:44:32 drip

但是，当第2项是开放的，左侧是被击落的，我希望有独立的行为。（感谢您的帮助） – Annhydrium

然后将它们添加到不同的容器中，左右两个... – drip

我试过用css，因为我没有对模板进行逻辑控制 – Annhydrium

如何有浮动左，右在一起

回答

相关问题