3

2行のCSSテーブルレイアウトを作成しました。最初のセルには画像を含むセルがあり、2番目のセルにはタイトルが含まれています。この下にコンテンツが表示されますが、それは問題ではありません。

これを試してみると、サイズを変更できないように見える一番上のテーブル行のテーブルセルが非常に大きくなります。どんな助けでもいただければ幸いです。

問題の画像

テーブルのセルを色分けしました。オレンジ色のブロックは画像​​です。その下の空白は、青いテーブルセルが非常に大きいために作成されたようです。

<div class="table">
        <div class="tr-header">
            <div class="image-cell">
                <img src="orange.png"/>
            </div>
            <div class="title">
            <h1>title</h1>
            </div>
        </div>
        <div></div>
        <div class="tr-content">
            <div class="content">
                <!-- Lorem Ipsum -->            
            </div>
        </div>
</div>

そしてCSS：

    *
    {
    margin:0px;
    padding:0px;
    }
    #table
    {
    display: table;
    }
    .tr-header
    {
    width:100%;
    display: table-row;
    height:185px;
    }
    img
    {
    width: 285px;
    height: 185px;
    }
    .image-cell
    {
    width:285px;
    height:185px;
    display: table-cell;
    }
    .title
    {
    display: table-cell;
    background-color:blue;
    width:100%;
    height:185px;
    }
    .tr-content
    {
    display: table-row;
    }
    .content
    {
    background-color:yellow;
    display: table-cell;
    width:100%;
    }

色分けが役に立たなかったり、コードが読みにくい場合や、ばかげた間違いをしたばかりの場合は、お詫びしますが、W3のWebサイトや以前のstackoverflowの質問を検索しました。

前もって感謝します。

編集：

vertical-align：topを.titleに追加すると、問題が大幅に軽減されましたが、それでも問題は残ります。

編集

4

1 に答える 1

5

あなたは常にテーブルとの垂直方向の配置について心配する必要があります-それが見えるcssスタイルのものでさえ。

タイトルクラスにvertical-alignプロパティを追加するだけです。

.title {
display: table-cell;
vertical-align: top;
background-color:blue;
width:100%;
height:185px;
}
于 2012-11-21T20:15:19.900 に答える