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

このフィドルのようなものが欲しいかもしれません。遅れている場合はお知らせください。だから私はうまくいくことができます。

code：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 に答える