5

この CSS/HTML コンボを使用して、2 列のレイアウトをエミュレートしています。

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 メールの問題でもあります。画像をdisplay:blockに設定するだけです。行の高さは必要ありません。

img{
  display: block;
 }

于 2016-06-02T15:59:13.620 に答える
0

入力できます

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