html - 使用 CSS 在 Accordion 结构中排列 div

Question

您好，我正在设计一个嵌入到 Accordion 小部件结构中的问卷。最初，我开始使用表格进行布局(我知道，我知道)，这没问题。 问题文本转到 Accordion 面板，用户指南和响应转到 Accordion 内容区域。

现在我想摆脱表格并使用纯 css，保持相同的布局。问题是 - 我不能将两个主要 block (div=Guidance 和 form=Response)放在同一条线上(流程无济于事)。我可以将“Response”向上移动以使其与 Guidance 对齐，但前提是我使用 negative top: -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}

现在，因为它是 Accordion - 我不能将整个问题包装在一个 div 中，否则它将无法工作；所以我必须将问题和回答部分分开。

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

提前致谢!

Answer 1

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

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

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

position: absolute 就可以了。