Question

这是html和css：

<div class="cont">

<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div class="item">eleven</div>
<div class="item">twelve</div>
<div class="item">thirteen</div>
<div class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>

<div class="island"></div>

</div>

.cont {
    width: 240px;
    height: 160px;
    background-color:blue;
    position:relative;
    overflow:hidden;
}

.island {
    position:absolute;
    top:50px;
    left:80px;
    width:40px;
    height:40px;
    background-color:red;
}

.item {
    float:left;
    display:inline;
    position:relative;
    height:20px;
    margin:2px;
    padding: 0 10px;
    background-color:yellow;
    overflow:hidden;
}

如何使用css使黄色物品绕红色“岛”流动？

总结：我有一个固定维度的容器div。其中的某个地方是一个特定位置的小“岛”div（目前绝对定位，将其从流中移除）。如何在容器中填充一些环绕岛屿的宽度未知的小元素？有没有办法用css做到这一点？我被卡住了。

Answer 1

可能你想要一些像fiddle这样的东西。如果我在一些地方滞后请告诉我。所以我可以解决..

代码：HTML

<div class="cont">

<div class="island"></div>
<div class="item">one</div>
<div class="item">two</div>
<div class="item">three</div>
<div class="item">four</div>
<div class="item">five</div>
<div class="item">six</div>
<div class="item">seven</div>
<div class="item">eight</div>
<div class="item">nine</div>
<div class="item">ten</div>
<div style="margin:0 20px" class="item">eleven</div>
<div style="margin:0 25px" class="item">twelve</div>
<div class="item">thirteen</div>
<div style="margin-left:58px;" class="item">fourteen</div>
<div class="item">fifteen</div>
<div class="item">sixteen</div>
<div class="item">seventeen</div>
<div class="item">eighteen</div>

</div>

如何围绕“绝对定位”元素流动一系列元素？

1 个答案: