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

大家好，我正在设计一个调查问卷，它被嵌入到一个手风琴小部件结构中。最初，我开始使用表格进行布局（我知道，我知道），这很好。 问题文本进入手风琴面板，用户指南和回答进入手风琴内容区

现在我想摆脱表格，使用纯css，保持相同的布局。问题是-我不能将两个主要模块（div=引导和form=响应）放在同一行上（流没有帮助）。我可以将“响应”向上移动，使其与指南对齐，但前提是我使用负顶部：-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 --> 

现在，因为它是手风琴式的，我不能把整个问题都放在一个div中，否则它就不起作用了；所以我必须把问题和回答分开

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

---

提前谢谢

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

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

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

position:absolute

就可以了

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

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