CSS 与图像 Div 和文本 Div 相同的基线

Question

我想在同一基线上放置图像 Div 和文本 Div。下面是我的示例代码和 JSFiddle。

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

<style>
    .wrap { width: 500px;}
    .img { float: left; }
    .txt { }
</style>

============更新================

最初，图像（left-top 角处的徽标）和文本（right-top 处的导航）之间应该有一些空白 space，并且基线与图像徽标相同。

Answer 1

从 .img 元素中删除 float 并将 .img 和 .txt 都设置为 display: inline:

.img, .txt { 
    display: inline;
}

然后设置 .txt 得到 vertical-align 的 baseline:

.txt {
    vertical-align: baseline;
}

JSFiddle demo.

Answer 2

使用 display:inline;

    .wrap { width: 500px;}
    .img { display:inline; }
    .txt { display:inline; }

<div class="wrap">
    <div class="img">
        <img src="http://www.cssportal.com/images/cssportal.png" />
    </div>
    <div class="txt">
        This is text.
    </div>
</div>

CSS 与图像 Div 和文本 Div 相同的基线

CSS with Image Div and Text Div for the same baseline

css

baseline