0

最初に認めますが、私は CSS を知っていますが、そのマスターではありません。

テーブル (td) に 4 つの画像を表示する必要があります。画像の配置は次のように必要です

A B
C D

ここでA、B、C&Dは、間にスペースのない 4 つの画像です。の幅TDは 40 ピクセルで、各画像の幅は 20 ピクセルです。

私は Stackoverflow に関する他の質問を見つけ、table'sborder-spacing、border-collapse プロパティを使ってスペースを削除しました。しかし、今の問題は、画像を次のように取得していることです

A
B
C
D  //without spacing with display:block in `td img`

また

A B
      //With space, with display:inline-block on `td img`
C D

実際のデモはFiddleで提供されています

コード (HTML)

<table>
<tbody>
<tr>
    <td valign="top" width="40px">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="a">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="b">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="c">
        <img width="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="d">
    </td>
</tr>
</tbody>
</table>

コード (CSS)

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td {
    display: inline-table;
    border-spacing: 0px;
    border-collapse: collapse;
}
td img {
    display: block;
}

Fiddleを期待どおりにするには、どの CSS プロパティを変更する必要がありますか。

4

6 に答える 6

3

float:left totd img クラスを追加する

更新されたデモhttp://jsfiddle.net/59vGe/6/

新しいデモhttp://jsfiddle.net/59vGe/14/

于 2012-09-07T06:40:45.820 に答える
2

それらをフロートさせるか、インラインブロック表示で垂直方向に整列させることができます

td img {
    float:left;    
}

浮く

td img {
    display: inline-block;
    vertical-align:top;    
}

垂直方向に整列

于 2012-09-07T06:43:40.753 に答える
1

tdfont-size:0;でgivetoを使用し、 imgタグ で削除します display:block;

このように

      td {
        display: inline-table;
        border-spacing: 0px;
font-size:0; //add this line
        border-collapse: collapse;
        }td img {
    display:block; // remove this line
        }

更新されたデモ

于 2012-09-07T06:39:01.570 に答える
1

こちらをご覧ください： JSFiddle

float:left clear:left :nth-child()との組み合わせを使用しましたdisplay:table-cell

このためにHTMLを変更できる場合は、次のtdように要素にクラス属性を追加できます。<td class="image-grid">

次に、CSSを更新して、そのために特別に選択します。

td.image-grid img {
    float:left;
    display: block;
}

td.image-grid img:nth-child(3){
    clear:left;
}

</ p>

于 2012-09-07T06:40:40.820 に答える
0

画像を浮かせます。

td img {
    float:left;
}

ここにフィドルがあります

于 2012-09-07T06:41:21.957 に答える
0

float を使用できます。しかし、すべての td を与えないでください。その代わりに、特定のクラス名を指定できます。

.testclass td img {
float:left;    
}

テストクラス td のみに適用されます。他のテーブルの td 値には影響しません。

于 2012-09-07T07:42:26.470 に答える