HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="two-cols">
    <div class="left-col">
        <img src="http://stott.customer.netspace.net.au/images/aurora2.jpg" alt="Image"/>
    </div>
    <div class="right-col">
        Text
    </div>
</div>
</body>
</html>

CSS

.two-cols {
    border: 1px solid black;
    display: table;
    width: 100%;
}

.left-col, .right-col {
    display: table-cell;
    width: 50%;
}

img {
    width: 300px;
    height: 200px;
    padding: 0;
    margin: 0;
}

JSBin here。

但是我的图片底部有一个不需要的填充：

Result

任何想法我为什么要这样做，我怎么能摆脱它？

Answer 1

默认vertical-align也是baseline，也适用于img。设为bottom并且有效：

img {
    vertical-align: bottom;
}

Answer 2

添加line-height:0

.left-col, .right-col {
    display: table-cell;
    width: 50%; 
  line-height:0
}

<强> DEMO

但是当您在多行中添加更多文字时，这会line-height:0。

因此，我建议您使用display:inline-block代替display:table-cell。

.left-col { width: 50%; vertical-align:top; display:inline-block; line-height:0;}
.right-col { width: 50%;  display:inline-block; vertical-align:bottom}

<强> DEMO 2

Answer 3

您可以输入

img{
   vertical-align:middle;
}

Answer 4

我遇到了同样的问题。这也是html电子邮件中的问题。只需将图像设置为display：block。不需要行高。

img{
  display: block;
 }

为什么我的图像底部有填充？

HTML

CSS

4 个答案: