Question

出于某种原因，手风琴内的内容出现在应有的位置之外。我希望div自动适应其中的内容，我认为当你没有指定高度时会发生这种情况吗？

发生了什么：

HTML：

<div id="accordion">
        <h3>13/08/2015, 12:00, Company</h3>
            <div>
                <p>Date: 13/08/2015<br>
                Start time: 12:00<br>
                End time: 19:00<br>
                Allocated break period: 15:00 - 15:30<br> 
                Assigned by: Manager name<br>
                Company: Company<br>
                    <button type="button" class="confirm">Confirm</button>
                    <button type="button" class="cancel">Cancel</button>
                    <button type="button">Submit</button>
                </p>
            </div>     
            <h3>shift2</h3>            
            <div>
            <p>This is the second sentence.</p>
            </div>
            <h3>shift3</h3>
            <div>
            <p>This is the third sentence.</p>
            </div>
    </div>

CSS

#accordion{
    background-color: #8f8f8f;
    color:#ffffff;
    min-width:98%;
    margin: 1%;

}

#accordion div{
    background-color: #f2f2f2;
    color:#000000;
}

#accordion h3{
    padding-left:1%;
    cursor:pointer;
}

此外，当按下取消按钮以包含表格时，我希望div进一步拉伸，这将如何完成？

Answer 1

你的CSS中的按钮必须包含错误。你的代码正在运行。看这里：Working jsfiddle

对于你的第二个问题：如果你把表格放在里面，Div会自动拉伸。例如：

//find div
var form=document.getElementById("accordion");

//create new div
var div=document.createElement('div');

//add text to div
div.appendChild(document.createTextNode("New Content"));

//append new div to div
form.appendChild(div);

手风琴div外的手风琴内容

1 个答案: