Question

首先我承认，我知道CSS，但不是那个主人。

我必须在表格中显示4张图片（td）。图像放置需要如下

A B
C D

其中A，B，C＆amp; D是4张图片，它们之间没有间距。 TD的宽度为40像素，每幅图像的宽度为20像素。

我在Stackoverflow上找到了其他问题，并使用table's border-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;
}

我应该更改哪些CSS属性以使Fiddle符合预期。

Answer 1

添加float:left to td img类

更新了演示http://jsfiddle.net/59vGe/6/

新演示http://jsfiddle.net/59vGe/14/

Answer 2

您可以浮动它们，也可以使用内嵌块显示垂直对齐

td img {
    float:left;    
}

Float

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

Vertical Align

Answer 3

用于 td 中的font-size:0;和 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
        }

的 Upated Demo 的

Answer 4

看看这里： 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;
}

Answer 5

浮动图像。

td img {
    float:left;
}

以下是Fiddle

Answer 6

你可以使用浮动。但请不要给所有的td。而不是你可以给出特定的班级名称。

.testclass td img {
float:left;    
}

它仅适用于testclass td。它不会影响其他表td值。

CSS属性删除间距

6 个答案: