0 
<table>
    <tr><td>test</td></tr>
    <tr>
        <td>
            <div style= height:200px;">
                <div  style="border:1px solid yellow; display: inline-block; width:100px">
                    <img src="orderedList4.png">
                </div>
                <div align="center" style="border:1px solid green;  display: inline-block; width:650px;height:100px;">
                    <div>center Test Header1</div>
                    <div>center Test Header2</div>
                </div>
                <div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
            </div>
        </td>
    </tr>
</table>

上記のコードでは、画像サイズは75*75ピクセルです。

  1. 3つのセルすべての高さを100ピクセルにしたい。
  2. 画像を中央に配置して左揃えにします。
  3. 中央のテキストを中央に配置します。
  4. 3番目のテキストを中央に配置して右揃えにします。

私はそれを機能させることができませんでした。

4

1 に答える 1

0

インライン スタイルを維持するのは悪夢です。一般的に、プレゼンテーションをコンテンツから切り離すように努めるべきです。実際のタグからすべてのスタイルを移動しました。テーブルを使用してそれぞれをセルとして参照しているので、それぞれを実際のdivセルにするつもりだったと思います。

<style>
.product_table {
    width:  850px;
}
    .product_table td {
        height:         100px;
        border:         solid 1px #000;
        vertical-align: middle;
    }
        .product_table .image {
            width:      100px;
            border-color:   yellow;
            text-align: left;
        }
        .product_table .title {
            /* Automatically sizes its width */
            border-color:   green;
            text-align: center;
        }
        .product_table .release {
            width:      100px;
            border-color:   red;
            text-align: right;
        }
</style>

<table class="product_table">
    <tr>
        <th colspan="3">test</th>
    </tr>
    <tr>
        <td class="image">
            <img src="orderedList4.png" />
        </td>
        <td class="title">
            <div>center Test Header1</div>
            <div>center Test Header2</div>
        </td>
        <td class="release">
            REL 1.0
        </td>
    </tr>
</table>

ただし、一番上の行はおそらく表の見出しであるため、h2使用されるレベルとして表の外に移動することを検討する必要があります。また、表がここで最も適切な要素であることを確認してください。このアイテムが何であれ複数の行がある場合は、divテーブルなしで s を使用する方がよい場合があります。

于 2012-11-21T23:24:30.447 に答える