包含两个其他div的text和div不是内联的

Question

以下是我正在玩的jsfiddle：http://jsfiddle.net/kwAqu/12/

我需要将图像与＆＃34; info＆＃34; DIV。我尝试了各种各样的事情（制作信息和图像跨度，从div中删除图像并放置显示：内联img标签本身）。

有关如何解决此问题的任何想法？这就是我想要的样子（你可以忽略边框等）：

Answer 1

利用float: left;并指定文字类width以封闭.info div。

您还希望将元素包装在父元素中，以确保项目正确对齐。我在演示中创建了div，其ID为wrapper。

<强> HTML：

<div id="wrapper">
    <div class = "one">
        <div class = "image"><img src = "http://www.google.com/images/srpr/logo3w.png"></div>
        <div class = "info">
            <div class = "title">this is my title</div>
            <div class = "text">Hello this is what I'm trying to inline. but its not working! what's going on...?</div>
        </div>
    </div>
</div>

<强> CSS：

#wrapper {
 width: 600px;   
}

.image {
    display: inline-block;
    float: left;
}

.info {
    display: inline-block;
    float: left;
    width: 200px;
    padding: 0 0 0 15px;
}

注意：您可以相应地调整.info div的填充以及wrapper div的宽度。

演示：http://jsfiddle.net/Rm7Pg/

Answer 2

我认为你在寻找的是

.image {
    display: inline-block;
    vertical-align:middle;
}

这将尝试将图像与其余元素匹配。

请阅读以下地点：

http://www.w3.org/wiki/CSS/Properties/vertical-align