0

根据这里成员的建议，我尝试为文章布局模板创建 div 而不是表格。我取得了合理的成功——显示的内容，但不正确，而且它也扰乱了页面——我有评论模块，它应该位于文章下方，向右推，文章内容向左和向下推。我将表格代码与 div 一起发布，希望有人能提供帮助（我认为，一个问题是有一列跨越 8 行，其中 4 列跨越 2 列，4 列包含 2 列，然后在下面这是跨越所有 3 列的另一行。我很困惑。现在我保留了表格，但我真的很想学习如何正确地做到这一点。任何帮助将不胜感激。

谢谢，裘德

桌子：

<table id='display' width=648 border=0 summary="">
    <tr>
        <td rowspan=7 width=228><?php echo $item->fields_by_id[3]->result; ?></td>
        <td width=200><b>Author:</b></td>
        <td width=220><?php echo $item->fields_by_id[1]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Publisher:</b></td>
        <td width=220><?php echo $item->fields_by_id[2]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Genre:</b></td>
        <td width=220><?php echo $item->fields_by_id[9]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>CRR Heat Rating:</b></td>
        <td width=220 width=420><?php echo $item->fields_by_id[11]->result; ?></td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[12]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[10]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[13]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[4]->result; ?></td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[5]->result; ?></td>
    </tr>
</table>

分区：

<div id="container">
    <div id="article">
        <div>
            <div style="float:left;">
                <div><?php echo $item->fields_by_id[3]->result; ?></div>
            </div>
        </div>
        <div>
            <div style="float:left;">
                <div><b>Author:</b></div>
                <div><b>Publisher:</b></div>
                <div><b>Genre:</b></div>
                <div><b>CRR Heat Rating:</b></div>
                <div><?php echo $item->fields_by_id[12]->result; ?></div>
                <div><?php echo $item->fields_by_id[10]->result; ?></div>
                <div><?php echo $item->fields_by_id[13]->result; ?></div>
                <div><?php echo $item->fields_by_id[5]->result; ?></div>
            </div>
        </div>
        <div>
            <div style="float:left;">
                <div><?php echo $item->fields_by_id[1]->result; ?></div>
                <div><?php echo $item->fields_by_id[2]->result; ?></div>
                <div><?php echo $item->fields_by_id[9]->result; ?></div>
                <div><?php echo $item->fields_by_id[11]->result; ?></div>
            </div>
        </div>
    </div>
    <div id="blurb">
        <div>
            <div style="float:left;">
                <div><?php echo $item->fields_by_id[4]->result; ?></div>
            </div>
        </div>
    </div>
</div>
4

1 回答 1

0

float使元素不再有高度，这会导致各种“有趣”的东西。我认为您正在搜索display: tableand display: table-cell。否则，您可以在应该显示在左浮动元素下的元素上使用clear: left;或。clear: both

要获得display: table并display: table-cell正常工作，您必须在每一列周围删除一个 div-wrapper。

<div id="article">
  <div>
    <div><?php echo $item->fields_by_id[3]->result; ?></div>
  </div>
  <div>
    <div><b>Author:</b></div>
    <div><b>Publisher:</b></div>
    <div><b>Genre:</b></div>
    <!-- etc -->
  </div>
</div>

然后使用以下 CSS：

#article {
  display: table;
}

#article > div {
  display: table-cell;
}
于 2013-09-29T14:57:03.760 回答