网格视图(相同宽度/不同高度)- 3 列 |CSS [英] Grid view (same width / different heights) - 3 columns | CSS

问题描述

我正在尝试使用 css 制作一个包含 3 列的网格视图.我有 2 列系统使用以下代码，但我似乎无法正确处理 3 列:

#container{background-color:#aaa;margin: 0 auto;height:500px;宽度:200px;}.box{背景颜色:白色；边框:1px纯黑色；保证金:2%；宽度:45%；显示:块；向左飘浮;box-sizing: 边框框；}.box:nth-child(2n + 0) { float: right;}

<div class='box' style="height:70px; background-color: red;">1</div><div class='box' style="height:130px; background-color: grey;">2</div><div class='box' style="height:90px;">3</div><div class='box' style="height:86px; background-color: orange;">4</div><div class='box' style="height:110px; background-color: green;">5</div><div class='box' style="height:40px;">6</div>

这是jsfiddle:

解决方案

如果您可以对 HTML 重新排序，则有一个多列解决方案.在其他情况下，我认为没有 JavaScript 是不可能的.

#container {背景色:#aaa;边距:0 自动；高度:500px；宽度:500px；-moz 列数:3；-webkit 列数:3；列数:3；-moz-column-gap: 10px;-webkit-column-gap: 10px;列距:10px；}.盒子 {背景颜色:白色；边框:1px纯黑色；宽度:100%；边距:10px 0；显示:内联块；box-sizing: 边框框；}

<div class='box' style="height:70px; background-color: red;">1</div><div class='box' style="height:86px; background-color: orange;">4</div><div class='box' style="height:130px; background-color: grey;">2</div><div class='box' style="height:110px; background-color: green;">5</div><div class='box' style="height:90px;">3</div><div class='box' style="height:40px;">6</div>

I'm trying to make a grid view with 3 columns using css. I have the 2 column system working with the following code, but I can't seem to get it correct for 3 columns:

#container{background-color:#aaa;margin: 0 auto;height:500px; width: 200px;}
.box{background-color:white;
  border:1px solid black;
  margin: 2%;
  width:45%;
  display:block;
  float:left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) { float: right; }

<div id='container'>
  <div class='box' style="height:70px; background-color: red;">1</div>
  <div class='box' style="height:130px; background-color: grey;">2</div>
  <div class='box' style="height:90px;">3</div>
  <div class='box' style="height:86px; background-color: orange;">4</div>
  <div class='box' style="height:110px; background-color: green;">5</div>
  <div class='box' style="height:40px;">6</div>
</div>

Here's the jsfiddle: https://jsfiddle.net/jfnvt9o3/

Is there a way to achieve the following with only css, and if so, how?

解决方案

If you can reorder your HTML there is a solution with multiple column. In other case I think is not possible without JavaScript.

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 500px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
}

.box {
  background-color: white;
  border: 1px solid black;
  width: 100%;
  margin: 10px 0;
  display: inline-block;
  box-sizing: border-box;
}

<div id='container'>
  <div class='box' style="height:70px; background-color: red;">1</div>
  <div class='box' style="height:86px; background-color: orange;">4</div>
  <div class='box' style="height:130px; background-color: grey;">2</div>
  <div class='box' style="height:110px; background-color: green;">5</div>
  <div class='box' style="height:90px;">3</div>
  <div class='box' style="height:40px;">6</div>
</div>

这篇关于网格视图(相同宽度/不同高度)- 3 列 |CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！