0

アイテム1がフロートの右側などを移動する理由がわかりませんが、

私はそれを説明するために小さな例を書きました: JSFiddle の例

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

N+1 を右にフロートする CSS で、1 行の右側に 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
}
4

1 に答える 1

0

次に、ドロップダウンを絶対にします。

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

更新された JSFiddle

于 2013-08-16T20:44:32.743 に答える