css div标签浮动问题

Question

在调整浏览器大小时，我希望得到第二张图片中显示的结果而不进入第一张图片中显示的位置。 http://jsfiddle.net/gtczu/19/

<div id="lft-widget" style=" border:solid red 3px"></div>
<div id="rgt-widget" style=" border:solid blue 3px"></div>
<div id="center-widget" style="border:solid green 1px"></div>

@charset"utf-8";

/* CSS Document */
* {
    margin:0;
    padding:0
}
a, a:hover {
    text-decoration:none;
    border:none
}

body {
    margin:0;
    padding:0;
}
#center-widget {
    position :relative;
    width:300px;
    height:auto;
    float:left;
    padding: 5px 0 15px 30px;
}
#lft-widget {
    width:234px;
    height:auto;
    position:relative;
    float:right;
    padding:25px 25px 0 0px;
}
#rgt-widget {
    width:200px;
    height:auto;
    float:left;
    padding: 2px 22px 72px 30px;
    position:relative;
}

我想要的是当我调整浏览器大小时，#center-widget应浮动到#rgt-widget的底部。这种情况在这种情况下是成功的，但在调整大小时它会漂浮在#lft-widget的底部，然后浮动到#rgt-widget的底部。我希望它直接漂浮在#rgt-widget的底部。

我想实现这个目标。

没有进入这个位置。

Answer 1

添加

 clear:left;

到center-widget css，当你展开窗口时它应该落在rgt-widget div的下面。