0

我在一个 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（即不是表格）并且样式必须是内联的。

4

2 回答 2

1

您需要float将图像添加到left. 并确保有足够的空间来容纳它们，div否则最右边的元素会换行。除非你打算在20px两者之间有一个空格，否则你只需要一个margin-right或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;">
于 2013-07-24T19:40:07.550 回答
1

Float图像left并给出div内容 a 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>
于 2013-07-24T19:43:10.450 回答