垂直內嵌塊？

目前我有類似this。「頁面」和「行」元素是使用JavaScript動態創建的。垂直內嵌塊？

當存在多個頁面時，問題上升，頁面1中的行被刪除，對於example。空白空間應由下面的元素填充，如果空白處於頁面末尾，則下一頁的第一個元素應填充空白空間，以此類推。最後它應該看起來像this。

我可以解決這個重新排列/重新創建整個PageCont。

有沒有一種方法可以實現這個使用純CSS？所以重新排列會被瀏覽器的渲染引擎處理。

類似於this內聯塊但具有垂直方向。

任何幫助是非常apreciated。

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

來源

2012-12-10 Axel Márquez

你想如何重新安排他們？你想要每個廣場動態地改變他們的數字並移動？很確定'float'會是一種解決方法，但如果我們正在談論改變數字，我相信這需要一些JavaScript。 – aug

操作可以成功執行平凡的，如果它包括橫向纏繞，用樸素簡單的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-10 23:56:21

沒有問題，只是一個小提醒，這段代碼使用html5，因此將受到現代瀏覽器的支持，較舊的不會垂直換行形成多列。 –

這正是我一直在尋找的！但該應用程序打算在IE8下工作。 –

在這種情況下，你將不得不使用你以前的實現與一點點的JavaScript，你介意嗎？ –

垂直內嵌塊？

回答

相關問題