html - 具有自动高度的 CSS3 Accordion

Question

我试图弄清楚如何使每个 Accordion div 的高度自动，但它弄乱了过渡。有没有办法将高度设置为 100% 或自动设置，这样我就不必设置它了？ http://jsfiddle.net/Rusxy/

HTML

<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="radio" checked />
        <label for="ac-1"><span>Honda Accordion</span></label>
        <article class="ac-small">
            <p>Some content... </p>
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="radio" />
        <label for="ac-2"><span>Accordion to Jim</span></label>
        <article class="ac-medium">
            <p>Some content... </p>
        </article>
    </div>
    <div>
        <input id="ac-3" name="accordion-1" type="radio" />
        <label for="ac-3"><span>Accordion 3</span></label>
        <article class="ac-medium">
            <p>Some content... </p>
        </article>
    </div>
    <div>
        <input id="ac-4" name="accordion-1" type="radio" />
        <label for="ac-4"><span>Accordion 4</span></label>
        <article class="ac-medium">
            <p>Some content... </p>
        </article>
    </div>
</section>

CSS

.ac-container{
    width: 400px;
    margin: 10px auto 30px auto;
}

.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label span{
    display: block; 
    background: transparent url(arrow_down.png) no-repeat right center;
}

.ac-container input:checked + label{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;
}

.ac-container input:checked ~ article{
    transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}

.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}

.ac-container input:checked ~ article.ac-large{
    height: 230px;
}

Answer 1

我的一个想法。不完美，但可能会让你继续前进。

CSS

        .ac-container{
        width: 200px;
        margin: 10px auto 30px auto;
    }
    
    .ac-container label{
        font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
        padding: 5px 20px;
        position: relative;
        z-index: 20;
        display: block;
        height: 30px;
        cursor: pointer;
        color: #777;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
        line-height: 33px;
        font-size: 19px;
        box-shadow: 
            0px 0px 0px 1px rgba(155,155,155,0.3), 
            1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
            0px 2px 2px rgba(0,0,0,0.1);
    }
    
    .ac-container label span{
        display: block; 
        background: transparent url(arrow_down.png) no-repeat right center;
    }
    
    .ac-container input:checked + label{
        background: #c6e1ec;
        color: #3d7489;
        text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
        box-shadow: 
            0px 0px 0px 1px rgba(155,155,155,0.3), 
            0px 2px 2px rgba(0,0,0,0.1);
    }
    
    .ac-container input{
        display: none;
    }
    
    .ac-container article{
        background: rgba(255, 255, 255, 0.5);
        margin-top: -1px;
        overflow: hidden;
        height: auto;
        position: relative;
        z-index: 10;
        transition: 
            height .3s ease-in-out, 
            box-shadow 0.6s linear;
    }

    .ac-container input:checked ~ article{
        box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
    }
    
    .ac-container article p{
        font-style: italic;
        color: #777;
        line-height: 0px;
        font-size: 14px;
        padding: 0px 20px;
        margin: 0px 14px;
        text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
        transition: all .6s;
    }
    
    .ac-container input:checked ~ article p {
        padding: 20px;
        line-height: 23px;
        
    }

将文章设置为自动高度，并使p改变它的实际大小(改变行高，还有其他的可能性)。

fiddle