6

ねえ、さまざまな形のフローティング グリッドを作ろうとしています。

これが私の目標と何が起こっているかです： http://imgur.com/a/wXQfA

ご覧のとおり、水平ピースの下に隙間があります。後でボックスを追加したり移動したりできるように、配置を使用せずに修正しようとしています。

コード: HTML 

        <li class="mediumBox">
            <a href="#"><img src="..." height="205" width="430"></a>
        </li>

        <li class="largeBox">
            <a href="#"><img src="..." height="430" width="430"></a>
        </li>

        <li class="verticleMediumBox">
            <a href="#"><img src="..." height="430" width="205"></a>
        </li>

        <li class="smallBox">
            <a href="#"><img src="..." height="205" width="205"></a>
        </li>

        <li class="smallBox">
            <a href="#"><img src="..." height="205" width="205"></a>
        </li>

        <li class="smallBox">
            <a href="#"><img src="..." height="205" width="205"></a>
        </li>

        <li class="smallBox">
            <a href="#"><img src="..." height="205" width="205"></a>
        </li>
    </ul>
</div>
</body>

CSS:

body{
background-color: #fffdf9;
height: 100%;
width: 100%;
}

#content{
background-color: red;
height: auto;
width: 900px;
margin: 5em auto 0 auto;
}

#work ul{
list-style: none;

}

#work li{
float: left;
margin:  10px;
}

#work li >a{
display: block;
}

#work li .smallBox{
float: left;
display: block;
}

#work li .mediumBox{
float: left;
display: block;
}

#work li .verticleMediumBox{
float: left;
display: block;
}

#work li .largeBox{
float: left;
display: block;
}

ここに私のコードがあります: http://jsfiddle.net/jw7pV/ 何らかの理由で、jsFiddle のバージョンは私の chrome バージョンのようには見えません。

4

1 に答える 1

2

編集：動的ボックスが必要であることを初めて読んでいませんでした。

列のサイズが変化する場合 (レスポンシブ デザインなど)、これらの絶対位置を動的に設定するものが必要です。したがって、javascript が必要です。

そのためには、jquery masonry または jquery isotope を使用できます。

http://masonry.desandro.com/

http://isotope.metafizzy.co/

:)

于 2013-06-25T09:28:54.943 に答える