1

目前我有这样的东西。“Page”和“Row”元素是使用 javascript 动态创建的。

当有多个 Pages 时，问题就出现了，并且第 1 页中的一个 Row 被删除，例如. 空白区域应由下面的元素填充，如果空白区域位于页面末尾，则下一页的第一个元素应填充空白区域，依此类推。最后它应该看起来像这样。

我可以解决这个重新排列/重新创建整个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 回答