1

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

我需要图像与“信息”div 内联。我尝试了很多方法（使信息和图像跨越，从 div 中删除图像并将 display: inline 用于 img 标签本身）。

关于如何解决这个问题的任何想法？这就是我希望它看起来的样子（你可以忽略边框等）： 在此处输入图像描述

4

2 回答 2

2

使用float: left;并分配文本类 awidth来包围.info div.

您还需要将元素包装在父元素中以确保项目正确对齐。我在演示中创建了一个divID 为的。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/

于 2012-07-10T23:41:55.903 回答
1

我想你正在寻找的是

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

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

阅读它，例如：

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

于 2012-07-10T23:44:52.617 回答