时间:2011-01-06 19:22:52

标签: html css layout css-float

5 个答案:

答案 0 :(得分:9)

这是一个解决方案,根据moontear的答案和http://www.csstextwrap.com/给出我想要的渲染。

CSS:

div {
    float: left;
    clear: left;
}

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    margin: 10px 10px 10px 0px;
}

#spacer {
    width: 0px;
    height: 40px;
}

HTML:

<div id="container">
    <div id="spacer"></div>

    <div id="inset">Inset</div>
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
</div>

http://jsfiddle.net/cope360/KbFGv/1/

上查看

答案 1 :(得分:2)

答案 2 :(得分:2)

答案 3 :(得分:2)

我遇到了同样的问题,我在cope360的答案基础上建立了一些不需要添加额外标记的答案。这里有jsfiddle基本上做同样的事情,但是使用纯粹的CSS。

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    clear:left;
}
#container:before {
    content: " ";
    height: 40px;
    width: 0px;
    float: left;
}

答案 4 :(得分:0)