浮动：右不工作

Question

我正在尝试让三段文字浮动到图像的右侧。但是，浮动：对；不工作。相反，文本和背景颜色（我为测试添加的）位于图像上方，完全覆盖它。

我到底错过了什么？

<div style="width: 100%; max-width: 1200px; height: 500px; background-color: purple;">
<a href="url"><img src="url" style="max-width: 406px; width: 30%; height: auto;  float: left;  background-color: red; position: absolute;"></a>
<div style="float: right; background-color: green; position: absolute; max-width: 790px; width:69%;">
<p> Text..... </p>
<p> More Text</p>
<p>Final Paragraph </p>
</div>
</div>

Answer 1

您正在为相同的元素使用 position:absolute; 和浮动。尝试只使用浮点数。

DEMO

Answer 2

位置：绝对； - 在 "green" 文本中设置它就是这样做的，绝对的，因此浮动不是 "inline" 与图像

<div style="float: right; background-color: green;  max-width: 790px; width:69%;">

Fiddle 进行了更改：http://jsfiddle.net/mschultheiss/zghbz40p/

浮动：右不工作

Float: Right Not Working

css

css-float