如何使用CSS创建此布局

Question

我正在尝试使用CSS获取此布局，但最接近的实现来自pinterest.com但他们需要一些Javascript才能实际获得布局。我需要知道我是否可以不使用Javascript来计算下一个项目的位置。

Answer 1

你只需要有三个浮动容器，如下所示：

HTML：

<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

CSS：

.container { float: left; width: 30%; }

然后添加您的内容，拉伸到100％宽度。

<div class="container">
   <div>1</div>
   <div>4</div>
</div>
<div class="container"></div>
<div class="container"></div>

CSS：

.container > div { width: 100%; }

这只是一个简单的想法，但如果你尝试，你会得到你想要的结果。

Answer 2

您可以使用CSS3 multi-column layouts。内容像报纸一样分布在列中。浏览器分发内容，以便所有列的高度相同（ish）。 但请注意，（i）内容从上到下，从左到右显示（ii）the browser support is limited at the moment。

＆＃13;

＆＃13;

$("#button1").on("click", function() {
  $("#container > div").height(function() {
    return Math.floor(Math.random() * 300);
  });
});

＆＃13;

#container {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
#container > div {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  min-height: 100px;
  border-bottom: 1em solid white;
  background-color: powderblue;
}
#button1 {
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<input id="button1" type="button" value="Randomize box sizes">

＆＃13;

＆＃13;

＆＃13;

关于屏幕尺寸：您可以使用CSS媒体查询来控制列数。例如，您可以选择在1000px +上显示4列，在800px +上显示3列，在较小屏幕上显示两列。