使用CSS在手风琴结构中安排div

Question

您好，我正在设计一个嵌入Accordion小部件结构的问卷。最初，我开始使用表格进行布局（我知道，我知道），这是好的。 问题文本转到手风琴小组，用户的指导和响应转到手风琴内容区域。

现在我想摆脱桌子并使用纯css，保持相同的布局。问题是 - 我不能将两个主要块（div = Guidance和form = Response）放在同一行上（流程没有帮助）。我可以将“响应”移动到引导线上，但前提是我使用负顶部：-250px这似乎是错误的。

所以，这是一个问题的HTML：

<div id="Q08150">                   <!-- BEGIN OF PANEL -->
    <div class="Question">
        <span class="QNumber">8.150</span>
        <span class="QText">Question text</span>
    </div>
</div>                      <!-- END OF PANEL -->

    <div class="PanelContent">          <!-- BEGIN OF CONTENT -->
        <div class="Guidance">
            <p>Guidance text1</p>
            <p>"Guidance text 2</p>
        </div>

        <form class="Response">
            <div class="ResponseControls">
                <label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY">Yes</label>
                <label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN">No</label>
                <label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS">Not Seen</label>
                <label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA">Not Applicable</label>
            </div>

            <div class="responseDetails">
                <div class="Observation">
                    <label for="ObsXXXX">Observation:</label>
                    <textarea name="observation" id="ObsXXXX" rows="6" disabled></textarea>
                </div>
                <div class="DueDate">
                    <label for="DueDateXXXX">Due date:</label>
                    <input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
                </div>
                <div class="actions">
                    <label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
                    <textarea name="actions" id="paXXXX" rows="6"></textarea>
                </div>
            </div>                              <!-- end of div class="responseDetails" -->
        </form>                                 <!-- end of class="Response" -->
    </div>                                      <!-- END OF CONTENT --> 

和以下CSS

.Question {
    width: 100%;
}
.PanelContent {
    width:100%
}
.QNumber {
    font-weight: bold;
}
.QText {
    font-weight: bold;
    padding-left: 20px;
}
.Guidance {
    width:55%;
    padding-right: 20px;
}
.Response {
    position: relative;
    left:60%;
    width: 45%;
}

textarea[name="observation"] {
    resize:none;
    width: 530px}

textarea[name="actions"] {
    resize:none;
    width: 530px}

现在，因为它是手风琴 - 我无法将整个问题包装在一个div中，否则它将无效;所以我必须将问题和响应部分分开。

顶部图片是我想要的，下面的图片显示使用表格的当前外观。

提前致谢！

Answer 1

当然，将这两个主要的“玩家”设置如下：

.Guidance {
    position: absolute;
    width:55%;
    padding-right: 20px;

}
.Response {
    position: relative;
    width: 37%;
    float: right;

position: absolute可以解决问题。