具有Image Div和Text Div的CSS用于相同的基线

Question

我想在同一基线处放置一个Div for image和一个Div for text。 下面是我的示例代码和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 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>