将div元素与右侧对齐而不重叠

Question

<div style="border: 1px solid">Hello</div>
<div style="float: right;border: 1px solid;width: 30%">Centre</div>
<div style="border: 1px solid">World</div>

我正在尝试将第二个div对齐到右侧，因为它只有宽度的30％。但是当我使用float时，第3个div与第2个div重叠。如何确保第3个div仅在第2个div之后不在第2个div之后。文本对齐无济于事，因为我希望整个div不仅仅是它的内容。

请建议。

Answer 1

此代码在Dreamweaver中适用于我，但由于某种原因不适用于jsfiddle？如果您知道原因，请发表评论。

http://jsfiddle.net/WAWN2/

<div style="border: 1px solid; width:100%">Hello</div>
<div style="float: right;border: 1px solid; width:30%; display:block;">Centre</div>
<div style="border: 1px solid; width:100%">World</div>​

这里还有一个使用clear的例子：

http://jsfiddle.net/NyFGB/

Answer 2

将第二个div移到html中的第一个div上方，以便按照您想要的方式获得布局：

＆＃13;

＆＃13;

<div style="float: right;border: 1px solid;width: 30%">Centre</div>
<div style="border: 1px solid">Hello</div>
<div style="border: 1px solid">World</div>

＆＃13;

＆＃13;

＆＃13;