2

我有一个 div 是display:table;- 在那个 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; 
}
4

6 回答 6

2

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

这就是为什么你的跨度暨TDs都采用那个宽度的原因。只需为第一个分配一个宽度，它应该可以解决您的问题。

即尝试添加此类

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

看演示

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

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

看这个演示

于 2013-10-22T07:17:25.577 回答
0

在此处查看演示

只需将类添加到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;
}
于 2013-10-22T07:08:30.043 回答
0

如果它div的行为像一张桌子，请尝试将其添加到.statusCommentUser：

border-collapse: collapse;

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

于 2013-10-22T07:08:45.487 回答
0

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

试试这个：

<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>
于 2013-10-22T07:09:28.383 回答
0

那这个呢：

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

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

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

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

jsFiddle

于 2013-10-22T07:17:47.457 回答
0

我遇到了同样的问题，并且能够通过在 display:table-cell 元素中添加属性来解决

border-spacing: 0;

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

于 2017-05-11T14:00:04.053 回答