CSS在div中定位div

时间:2013-07-24 19:37:47

标签: html css styles positioning

我在div中有一个div给我带来了问题。

<div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:300px;margin:20px;display: inline-block">
    <img src="images/f35.jpg" style="margin-right:10px" />
    <div style="float:right;padding-left:10px; border-left:solid 1px #aaaaaa; font-size: 12px; display:inline-block">
        Some text here.
    </div>
</div>

这就是这个:

Example

div中的div不显示与图像内联。我基本上需要将文本放在包含div和图像右侧。

只是一些要点:我需要使用div(即不是表格),样式必须是内联的。

2 个答案:

答案 0 :(得分:1)

您需要将float图片发送到left。并确保有足够的空间在div中保存它们,否则最右边的元素将会断开到新线。除非您打算在两者之间留出20px个空格,否则您只需要margin-rightpadding-left

<img src="images/f35.jpg" style="width:50%; float:left; margin-right:10px" />
<div style="width:50%; float:right; border-left:solid 1px #aaaaaa; font-size: 12px;">

答案 1 :(得分:1)

Float图片left并向div提供内容为width的内容,请记住clear以后的花车...

这是一个工作小提琴http://jsfiddle.net/feitla/xyYh5/

<div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:350px;margin:20px;display: inline-block">
    <img src="http://www.dothetest.co.uk/images/do-test.gif" style="margin-right:10px; float:left;" width="150"/>
    <div style="float:right;padding-left:10px; border-left:solid 1px #aaaaaa; font-size: 12px; display:inline-block;width:160px;" >
        Lorem ipsizzle break it down sure amizzle, consectetuer adipiscing elizzle. Nullam funky fresh velizzle.
    </div>
</div>