文字和DIV含其他两个div没有内嵌

问题描述：

下面是我用玩的jsfiddle：http://jsfiddle.net/kwAqu/12/文字和DIV含其他两个div没有内嵌

我需要的图像与“信息”的div内联。我尝试了各种各样的东西（制作信息和图像跨度，从div中移除图像并放置显示：内联img标记本身）。

关于如何解决此问题的任何想法？这是我希望它看起来像（你可以忽略边框等）： enter image description here

你试图把标题和文字上的形象呢？ – 2012-07-10 23:37:13

nope - 我想要他们并排。我已经更新了我想要的样子 - 感谢您澄清问题:) – 2012-07-10 23:39:20

答

利用float: left;并指定文本类width包围.infodiv。

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

注意：您可以调整为填充相应的.infodiv，随着wrapperdiv宽度一起。

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

答

我想你正在寻找的是

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

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

阅读上它是这样的地方如：

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

文字和DIV含其他两个div没有内嵌

相关推荐