1

現在、私はこのようなものを持っています。「Page」要素と「Row」要素は、javascript を使用して動的に作成されます。

複数のページがあり、ページ 1 の行が削除された場合などに問題が発生します。空のスペースは下にある要素で埋められるべきであり、空のスペースがページの最後にある場合は、次のページの最初の要素が空のスペースを埋める必要があります。最終的には次のようになります。

この再配置/全体を再作成することで解決できますPageCont。

純粋な CSS を使用してこれを実現する方法はありますか? そのため、再配置はブラウザのレンダリング エンジンによって処理されます。

このインラインブロックのようなものですが、垂直方向です。

どんな助けでも大歓迎です。

HTML:

<div class="PageCont">
    <div class="Page">
        <div class="Row">1</div>
        <div class="Row">2</div>
        <div class="Row">3</div>
        <div class="Row">4</div>
    </div>
    <div class="Page">
        <div class="Row">5</div>
        <div class="Row">6</div>
        <div class="Row">7</div>
        <div class="Row">8</div>
    </div>
    <div class="Page">
        <div class="Row">9</div>
    </div>
</div>​

CSS:

.PageCont
{
    height: 300px;
    width: 350px;    

    border:2px solid red
}

.Page
{
    float:left;
    margin-left:10px;
}

.Row
{
    height:50px;
    width:50px;

    background-color:blue;
    color:white;
    margin-top:10px;
}

</p>

4

1 に答える 1

0

プレーンでシンプルな CSS を使用して水平方向の折り返しが含まれていれば、この操作は簡単に実行できます。ただし、このケースでは縦方向の折り返しが含まれるため、現在の実装では JavaScript が必要です。列を使用する場合は、javascript は必要なく、必要なのは CSS だけです。
ここに私が実装したフィドルがありますhttp://jsfiddle.net/eQvaZ/

HTML は次のとおりです。

<body>
    <div class="pageCont">
        <div  class="Row">C1</div>
        <div class="Row">C2</div>
        <div  class="Row" id="to-remove">C3</div>
        <div  class="Row">C4</div>
        <div  class="Row">C5</div>
        <div  class="Row">C6</div>
        <div  class="Row">C7</div>
    </div>
    <div>Removing C3 in 5 seconds...</div>
</body>

CSS:

.pageCont{
    column-count:2;
    column-rule:0px;
    -webkit-column-count: 2;
    -webkit-column-rule: 0px;
    -moz-column-count: 2;
    -moz-column-rule: 0px;
    padding:10px;
    height: 250px;
    width: 200px;
    border:2px solid red
 }

.Row {
    height:50px;
    width:50px;
    background-color:blue;
    color:white;
    margin-bottom:10px;
 }

項目を削除する JavaScript のビット:

setTimeout( function(){
var to_remove = document.getElementById('to-remove');
to_remove.parentNode.removeChild(to_remove);
}, 5000);

この実装に関してご不明な点がございましたら、お知らせください。

于 2012-12-10T23:56:21.063 に答える