[英]CSS positioning div within a div
我在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>
这就是这个:
div中的div不显示与图像内联。 我基本上需要将文本放在包含div和图像右侧。
只是一些要点:我需要使用div(即不是表),样式必须是内联的。
您需要将图像float
到left
。 并确保有足够的空间将其中的两个都保存在div
否则最右边的元素将分解为新行。 除非你打算在两者之间有一个20px
空白,否则你只需要margin-right
或padding-left
的padding-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;">
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.