Question

我想构建一个包含多个列的网页。在每列中，将有包含文本的框;每个框将适合一列或转到下一列的顶部。如果页面上的列数多于适合的值，则应进行水平滚动。应该没有垂直滚动。这是我想要实现的目标的图像：

在示例中，“标题7”框不适合第1列的底部，因此启动了新的第2列。然后当第2列中没有更多新框适合时，它们从列的顶部开始3。

我到目前为止设法实现的是使用此CSS的一列中的所有框：

.outer {
  height: 500px;
  overflow-x: scroll;
  background: #fc8;
}
h1 {
  font-size: 18px;
  margin: 1px 0px 3px 0px;
  color: #248;
}
p { font-size: 13px; margin: 2px 0px;}
.box {
    background: #def;
    padding: 3px 6px;
    border: 2px solid #369;
    margin: 3px 6px;
    vertical-align: top;
    width: 250px;
}

这些框位于div.outer并且包含此HTML：

<div class='outer'>
  <div class='box'>
    <h1>The title 1</h1>
    <p>Some text here...</p>
  </div>
  ...etc...
</div>

例如，请参阅JS Fiddle。理想情况下，我想要的解决方案只是HTML和CSS，没有JavaScript。

Answer 1

您可以使用flexbox layout。使用flex-flow: column wrap后，列将在达到最大高度后进行换行。请务必查看browser support for flexbox。

JSfiddle Demo

.outer {
  height: 500px;
  overflow: auto;
  background: #fc8;
  /* Added CSS */
  display: flex; 
  flex-flow: column wrap;
}
h1 {
  font-size: 18px;
  margin: 1px 0px 3px 0px;
  color: #248;
}
p {
  font-size: 13px;
  margin: 2px 0px;
}
.box {
  background: #def;
  padding: 3px 6px;
  border: 2px solid #369;
  margin: 3px 6px;
  vertical-align: top;
  width: 250px;
}

<div class='outer'>
  <div class='box'>
    <h1>The title 1</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 2</h1>
    <p>
      Some different text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 3</h1>
    <p>
      Some longer text here. Danish croissant. Powder halvah. Tootsie roll topping tiramisu jelly-o fruitcake cheesecake marzipan.
    </p>
  </div>
  <div class='box'>
    <h1>The title 4</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 5</h1>
    <p>
      Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.
    </p>
  </div>
  <div class='box'>
    <h1>The title 6</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 7</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 8</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 9</h1>
    <p>
      Some varied text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 10</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 11</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>
  <div class='box'>
    <h1>The title 12</h1>
    <p>
      Some text here...
    </p>
  </div>


</div>

Answer 2

您可以使用CSS3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="background-image-holder" id="background-image-holder"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS0-vTpYyoWtyzIQe279XQ1YM0Pby9SklnSn7O3SBaZQB9Ipl2zzIXiStQ" class="background-bomb"> <span class="bomb-overlay-holder"> </span> </div>属性实现类似的结构。

column

DEMO

包含多列的页面，水平滚动，无垂直滚动

2 个答案: