2

这是 jsFiddle：http: //jsfiddle.net/RkMFK/

这是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做到这一点吗？我被困住了。

4

1 回答 1

0

可能是你想要一些像这个小提琴一样的东西。如果我在某些地方落后，请告诉我。所以我可以锻炼..

代码：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>
于 2012-11-12T06:36:29.953 回答