在 <dl> 的 <dd> 中放置 <table> 会对我页面的其他元素产生不利影响

Question

我正在使用仅在右侧带有页眉和粘性页脚的两列布局。我右栏的内容区域有一个部分和一个内嵌显示的边。

我正在尝试创建一个常见问题解答页面。我正在使用问题和答案的描述列表，并在列表底部有一个链接可以返回顶部。

对于其中一个答案（描述数据），我想添加一个信息表。我尝试将表格放在“dd”的位置，然后尝试将其放在“dd”中。无论哪种方式，表格都会出现在“转到顶部”链接下方，并导致我的页脚在页面上上升并覆盖其他信息。

有没有办法让表格成为“dd”的一部分而不会产生这些不利影响？如果没有，还有哪些其他可行的解决方案来格式化此页面？

以下是页面受影响区域的代码：

常见问题解答

    <dl>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question.</dd>
    <br>
    <dt>Q &nbsp Question?</dt>
    <dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
    <dd>
    <table style="width: 600px; border:none;">
    <tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
    <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information$300 for up to 3 hours of play</td>        </tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- nformation</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th>  </th><td>- information</td></tr>
     <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
     </dd>
     <br>
    </dl>
    <a href="#top">Go to top</a>
    </section>

    <aside><h2>Comments</h2>
    <div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p>
    <div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
    <p class="name">person</p></aside>
    <div id="footer">
    <div>&copy;Copyright 2015. All Rights Reserved.</div>
    </div>  

Answer 1

您没有关闭打开的<table> 标记。在</dd> 之前使用</table> 将其关闭。 代码将是

<dl>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question.</dd>
<br>
<dt>Q &nbsp Question?</dt>
<dd>A &nbsp Paragraph of information to answer question. Table below is                further explanation of answer.</dd>
<dd>
<table style="width: 600px; border:none;">
<tr><th><a style="font-weight:bold;"><em>Header 1:</em></a></th></tr>
<tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 2 </em></a></th><td>- information$300 for up to 3 hours of play</td>        </tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px;"><em> Header 3 </em></a></th><td>- information</td></tr>         
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- nformation</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th>  </th><td>- information</td></tr>
 <tr><th><a style="font-variant:small-caps; letter-spacing: 1px:"><em> Header 4 </em></a></th><td>- information</td></tr>
 </table> <!-- You missed  out this tag -->
 </dd>
 <br>
</dl>
<a href="#top">Go to top</a>
</section>

<aside><h2>Comments</h2>
<div class="blockquote"><blockquote><q> love You Two!</q></blockquote>        </div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p>
<div class="blockquote"><blockquote><q>I love You Two!</q></blockquote></div>
<p class="name">person</p></aside>
<div id="footer">
<div>&copy;Copyright 2015. All Rights Reserved.</div>
</div>