0

首先我承认，我知道 CSS，但不是这方面的大师。

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

A B
C D

其中A, B, C&D是 4 张图像，它们之间没有间距。的宽度TD为 40 像素，每个图像的宽度为 20 像素。

我在 Stackoverflow 上找到了其他问题，并使用了table's边框间距、边框折叠属性来删除空间。但现在的问题是我的图像是

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符合预期。

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

font-size:0;在您的td中使用 give to 并在您的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;    
}

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

于 2012-09-07T07:42:26.470 回答