如何使用 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. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. However note that (i) the content displays from top to bottom, left to right (ii) the browser support is limited at the moment.

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

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

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

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

如何使用 CSS 创建此布局

How to create this layout using CSS

html

javascript

css

semantic-ui