5

我正在使用这个 CSS/HTML 组合来模拟两列布局：

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在这里。

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

结果

任何想法为什么我会得到它，我该如何摆脱它？

4

4 回答 4

18

默认值vertical-align也baseline适用于img。让它bottom起作用：

img {
    vertical-align: bottom;
}
于 2012-12-27T11:33:54.910 回答
3

添加line-height:0

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

演示

但这会使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}

演示 2

于 2012-12-27T11:34:49.370 回答
1

我有同样的问题。这也是 html 电子邮件中的一个问题。只需将图像设置为显示：块。不需要线高。

img{
  display: block;
 }

于 2016-06-02T15:59:13.620 回答
0

你可以输入

img{
   vertical-align:middle;
}
于 2014-02-02T11:03:58.477 回答