Question

我有一个手风琴网格如下：

<body>
    <div>
        <div class='accordion-left'>
            <h3>Left 1</h3>
            <div></div>
        </div>
        <div class='accordion-right'>
            <h3>Right 1</h3>
            <div></div>
        </div>
    </div>

    <div>
        <div class="accordion-left">
            <h3>Left 2</h3>
            <div></div>
        </div>
        <div class="accordion-right">
            <h3>Right 2</h3>
            <div></div>
        </div>
    </div>
</body>

我还有jsfiddle。

从＆＃34;左1＆＃34;和＃34;右1＆＃34;是在同一个父div我期待如果我点击＆＃34;左1＆＃34;，两个＆＃34;左2＆＃34;和＆＃34;右2＆＃34;会一起下降。然而，两者都只是错位。如果我点击＆＃34;右1，＆＃34;只有＆＃34;右2＆＃34;掉下来。此外，如果每个手风琴的兄弟节有不同的高度，我也希望底行的div按照最高的div落在一起。

如何将a div手风琴视为一个实体？

Answer 1

您可以使用“clearfix hack”：http://nicolasgallagher.com/micro-clearfix-hack/

在您的手风琴父母：

.accordion-parent:before, .accordion-parent:after {
    content:"";
    display:table;
}
.accordion-parent:after {
    clear:both;
}

同一线路上没有相同高度的手风琴没有问题（在我的演示中添加）

请参阅更新：http://jsfiddle.net/2Un4u/8/

Answer 2

这是因为您正在使用float。尝试使用inline-block为你的手风琴。还要稍微调整宽度，使左右两侧显示在同一条线上。另外，使用 vertical-align：如果您希望它们垂直对齐，则为top。

div {
    vertical-align: top;
}

.accordion-left {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}
.accordion-right {
    display: inline-block;
    width: 48%;
    overflow: hidden;
}

http://jsfiddle.net/2Un4u/5/

Answer 3

我稍微修改了代码，向左侧添加了一个容器，而不是左右，左右我将它们分组在左左，右右。现在容器有宽度，手风琴总是100％的容器

http://jsfiddle.net/2Un4u/10/

  <div class="container"> <!-- new class -->
    <div class='accordion-left'>
        <h3>Left 1</h3>
        <div></div>
    </div>
    <div class='accordion-left'>
        <h3>left 2</h3>
        <div></div>
    </div>
</div>

<div class="container"> <-- new class
    <div class="accordion-right">
        <h3>right 1</h3>
        <div></div>
    </div>
    <div class="accordion-right">
        <h3>Right 2</h3>
        <div></div>
    </div>
</div>

.container{
    width: 50%;  /* define width */
    display:inline-block;
    float:left;
}
.accordion-left {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}
.accordion-right {
    width: 100%;
    overflow: hidden;
    display:inline-block;
}

将手风琴的div视为一体

3 个答案: