Question

我在页面上有一些DIV。当到达页面底部时，如何让DIV在右侧创建一个新列。所以我有一些小的固定高度DIV，里面有图像。在每个DIV之后，有一条线然后是下一个div，依此类推。在较小的显示器上，屏幕需要滚动才能看到DIV。所以我将overflow: hidden添加到正文中，以禁用滚动。现在最底部的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>

Answer 1

@ samuel-denty你在寻找CSS Columns吗？

这里是jsfiddle：https://jsfiddle.net/zk7578vj/
尝试在css上使用class（。）图标而不是id（＃），如下所示：

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>

Answer 2

有很多解决方案，所有这些都会遇到填充问题。专栏因此而臭名昭着。

具有良好覆盖率的良好选择是使用flexboxes。 Flexboxes几乎是为这种东西制作的。

将所有divs换行到另一个div（我使用section）并为包装容器提供一些flexbox规则：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，您需要为包装器提供高度和宽度规则。如果它位于另一个具有设定高度的容器中，您应该能够将其设为height: 100%，它将到达页面底部。

警告：columns和flexboxes因跨浏览器兼容性问题而臭名昭着，尽管移动浏览器在这方面稍微好一些。一个好的解决方案是使用一个专注于响应或移动设计的库，如Bootstrap或SpaceBase（尽管后者是SASS库）

到达页面末尾时，将DIV放入新列

2 个答案: