html - 文本和包含另外两个 div 的 div 不是内联的

Question

这是我正在玩的 jsfiddle:http://jsfiddle.net/kwAqu/12/

我需要图像与“信息”div 内联。我尝试了各种方法(制作信息和图像跨度，从 div 中删除图像并将 display: inline 放入 img 标签本身)。

关于如何解决这个问题有什么想法吗？这就是我想要的样子(你可以忽略边框等):

Answer 1

利用 float: left; 并为文本类分配一个 width 以包含 .info div。

您还需要将元素包裹在父元素中以确保元素正确对齐。我在演示中创建了一个 ID 为 wrapper 的 div。

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/