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

如何左右浮动

1 个答案: