位置相对重叠浮动:左 -

时间:2012-05-11 14:26:01

标签: css css-float

http://klarbild.probiermau.ch/static/index.html

我左边有蓝色的盒子。 我有一个橙色的盒子 - 位置:相对。

橙色框应该放在里面浮动蓝框,不重叠。 所以蓝色框应该是漂浮在橙色框内。

这可能吗?提示?

编辑: 我希望只能通过使用css来改变橙色框的位置。蓝色框应始终围绕橙色框浮动。没有在橙色盒子后面“隐藏”。

非常感谢

1 个答案:

答案 0 :(得分:1)

提示:更改橙色框的位置并将其向右浮动(不含position : relative

请参阅此示例小提琴:http://jsfiddle.net/4Bber/1/

代码:

<div class="wrapper">
    <div>blue 1</div>
    <div>blue 2</div>
    <div>blue 3</div>
    <div>blue 4</div>
    <div>blue 5</div>
    <div>blue 6</div>
    <div id="orange"></div>
    <div>blue 7</div>
    <div>blue 8</div>
    <div>blue 9</div>
    <div>blue 10</div>
    <div>blue 11</div>
    <div>blue 12</div>
    <div>blue 13</div>
    <div>blue 14</div>
</div>

的CSS

.wrapper { width: 440px; }
.wrapper div { 
    width      : 100px; 
    height     : 100px;
    background : blue;
    float      : left; 
    margin     : 0 0 10px 10px; 
    color      : #fff;
 }

 #orange { 
    background : orange; 
    width      : 210px; 
    height     : 210px; 
    float      : right;
 }