Question

根据会员的建议，我试图创建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的：

<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>

Answer 1

float使得该元素不再具有高度，这会导致各种“有趣”的东西。我想您正在搜索display: table和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;
}

模板中的Div正在推动页面不对齐

1 个答案: