Question

目前我有类似this的内容。 “页面”和“行”元素是使用javascript动态创建的。

当example有多个页面，并且第1页中的一行被删除时，问题就会出现。空白空间应该由下面的元素填充，如果空白空间位于页面的末尾，则下一页的第一个元素应该填充空白空间，依此类推。最后它应该看起来像this。

我可以解决这个重新排列/重新创建整个PageCont。

有没有办法可以使用纯CSS实现这一目标？因此，重新排列将由浏览器的呈现引擎处理。

像this内嵌块但有垂直方向的东西。

任何帮助都是非常苛刻的。

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;
}

Answer 1

如果它包含水平包装，并且使用简单的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);

如果您对此实施有任何疑问，请与我们联系。

垂直内联块？

1 个答案: