當頁面到達時，將DIV放在新列中

我在頁面上有一些DIV。如何在頁面底部到達時讓DIV在右側創建一個新列。所以我有一些小的固定高度的DIV，裏面有圖像。在每個DIV之後，有一條線，然後是下一個div，依此類推。在較小的顯示器上，屏幕需要滾動才能看到DIV。所以我加了overflow: hidden到身上，禁用了滾動。現在最底部的DIV被切掉了，所以我想要切出的DIV創建一個新的列到右側。當頁面到達時，將DIV放在新列中

例如：。

body { 
 
overflow: hidden;} 
 
#icon { 
 
background: #000; 
 
color:#fff; 
 
height:50px; 
 
width:50px; 
 
}

<body> 
 
<div id=icon>1</div><br> 
 
<div id=icon>2</div><br> 
 
<div id=icon>3</div><br> 
 
<div id=icon>4</div><br> 
 
<div id=icon>5</div><br> 
 
<div id=icon>6</div><br> 
 
<div id=icon>7</div><br> 
 
<div id=icon>8</div><br> 
 
<div id=icon>9</div>

來源

2016-08-04 samdd

https://jsfiddle.net/Mi_Creativity/a3os9fmc/ –

的確，我想那你正在尋找的是根據高度變化的東西，而不是固定的動態 –

@ Mi-Creativity是的，頁面應該是動態的在所有屏幕尺寸上 – samdd

還有很多這種解決方案的所有運行到填充工具的問題。列是臭名昭着的。

體面的覆蓋面的一個不錯的選擇是使用flexboxes。 Flexboxes非常適合這種東西。

包裝所有的divs在另一個DIV（我用section），給包裝容器一些Flexbox的規則：

body { 
 
    overflow: hidden;} 
 

 
.wrap { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100vh; /*the height will need to be customized*/ 
 
    width: 50px; 
 
} 
 

 
#icon { 
 
    background: #000; 
 
    color:#fff; 
 
    height:50px; 
 
    width:50px; 
 
    margin-left: 10px; 
 
}

<section class='wrap'> 
 
    <div id=icon>1</div><br> 
 
    <div id=icon>2</div><br> 
 
    <div id=icon>3</div><br> 
 
    <div id=icon>4</div><br> 
 
    <div id=icon>5</div><br> 
 
    <div id=icon>6</div><br> 
 
    <div id=icon>7</div><br> 
 
    <div id=icon>8</div><br> 
 
    <div id=icon>9</div> 
 
</section>

你需要給予高度和寬度規則的包裝，但是。如果它在另一個具有設定高度的容器中，則應該可以給它height: 100%，它將會到達頁面的底部。

警告詞：columns和flexboxes因跨瀏覽器兼容性問題而臭名昭着，儘管移動瀏覽器在這方面稍微好一些。一個好的解決方案是使用一個專注於響應或移動設計的庫，如Bootstrap或SpaceBase（儘管後者是SASS庫）

來源

2016-08-04 18:05:24 joh04667

工程。我只能說，謝謝 – samdd

@塞繆爾denty你找CSS列？

這裏的jsfiddle：https://jsfiddle.net/zk7578vj/
嘗試使用，而不是在CSS id（＃）class圖標，像這樣（。）：

body { 
    overflow: hidden; 
    -webkit-columns: 50px 2; 
    -moz-columns: 50px 2; 
    columns: 50px 2; 
} 
.icon { 
    background: #000; 
    color:#fff; 
    height:50px; 
    width:50px; 
} 


<body> 
    <div class="icon">1</div><br> 
    <div class="icon">2</div><br> 
    <div class="icon">3</div><br> 
    <div class="icon">4</div><br> 
    <div class="icon">5</div><br> 
    <div class="icon">6</div><br> 
    <div class="icon">7</div><br> 
    <div class="icon">8</div><br> 
    <div class="icon">9</div> 
</body>

來源

2016-08-04 17:54:00 yukioxD

我測試了這種方法，它的工作原理，但它沒有， t放大或縮小時自動調整 – samdd

當頁面到達時，將DIV放在新列中

回答

相關問題