css - 具有相同基线的 Image Div 和 Text Div 的 CSS

Question

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

http://jsfiddle.net/xLrf7pyt/

<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>

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

最初，图像（左上角的标志）和文本（右上角的导航）之间应该有一些空白空间，具有与图像标志相同的基线。

Answer 1

float从您的元素中删除.img，而是将两者都.img设置.txt为display: inline：

.img, .txt { 
    display: inline;
}

然后设置.txt为vertical-align：baseline

.txt {
    vertical-align: baseline;
}

JSFiddle 演示。

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>