Question

我有一个display:table;的div - 在div中有两个display:table-cell。

一个表格单元格是跨度持有和img，另一个是跨度保持文本，

由于某种原因，我不想要两个display:table-cell之间的空格。

如何让表格单元格彼此相邻？

这是我的HTML：

<div class="statusCommentUser">
    <span><img src="/Content/Images/contactDemo_small_image.png" class="SmallUserImg"></span>
    <span>Sounds great, man!</span>
 </div>

这是我的css：

.statusCommentUser {
    width:450px;
    height:50px;
    display:table;
}

.statusCommentUser span {
    display: table-cell;
    vertical-align: middle; 
}

Answer 1

将css规则display:table-cell分配给任何元素时，它的行为与某个表的任何td元素相同。因此，在这种情况下，它会根据父宽度和同一行中其他tds的数量自动调整自身，只有当您没有为此td指定宽度时才会自动调整。

这就是为什么你的跨度TDs都取这个宽度的原因。只需为第一个宽度指定宽度，它就可以解决您的问题。

即。尝试添加此类

.statusCommentUser span:first-child{
    width:50px;
}

请参阅demo

此外，如果你想要的只是将图像跨度和文本跨度水平对齐，你可以通过许多其他方式来实现，即将你的css类更改为：

.statusCommentUser {
    width:450px;
    height:50px;
 }
.statusCommentUser span {
  float:left;
 }
.statusCommentUser span:last-child{
    position:relative;
    top:40px;
}

请参阅此demo

Answer 2

<强> See Demo Here

只需将类添加到包含图片的span，然后设置width

HTML

<div class="statusCommentUser">
    <span class="user"><img src="http://placehold.it/30x30/" class="SmallUserImg"></span>
    <span>Sounds great, man!</span>
 </div>

CSS

span.user {
    width: 35px;
}

Answer 3

如果div的行为与表格类似，请尝试将其添加到.statusCommentUser：

border-collapse: collapse;

此CSS用于删除表格中单元格之间的间距。

Answer 4

空间来自两个<span>之间的换行符和缩进符。

试试这个：

<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>

Answer 5

这个怎么样：

.statusCommentUser img
{
    width: 100%;
    height: 100%;
    float: left;
}

您的图片将成为您单元格的总大小。此外，您的图像必须浮动才能定位在单元格中（例如，图像不在单元格的中间）。

要防止图像拉伸，可以设置图像范围的静态宽度。或者，您可以根据图像大小自动调整单元格。但是，您必须删除div tabel的静态宽度。

Manish Mishra用于虚拟图像的图像^^

<强> jsFiddle

Answer 6

我遇到了同样的问题，并且可以通过在display：table-cell element

中添加属性来解决

border-spacing: 0;

希望它能解决那些仍在寻找的人

删除display：table-cell之间的空格

6 个答案: