0

ここのメンバーからのアドバイスを受けて、記事レイアウト テンプレートのテーブルではなく div を作成しようとしました。私はかなりの成功を収めました.コンテンツは表示されましたが、正しく表示されず、ページも混乱しました.記事の下にあるはずのコメントモジュールを右側に押し上げ、記事のコンテンツを左右に押しました. 誰かが支援できることを期待して、div と一緒にテーブル コードを投稿しています (1 つの問題は、8 行にまたがる 1 つの列があり、そのうちの 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: tableと を検索していると思いますdisplay: table-cell。それ以外の場合は、左フローティング要素の下に表示する必要がある要素に対してclear: left;orを使用できます。clear: both

を取得するにはdisplay: table、display: table-cell各列の div-wrapper を 1 つ削除する必要があります。

<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 に答える