Question

我创建了一个具有列数属性的砌体网格（列数：4；）。网格中的所有div元素都是垂直显示的。

是否可以使用js / jQuery将它们水平显示？

<div id="categories">
    <div class="item">
      <p>1</p>
    </div>
    <div class="item">
      <p>2</p>
    </div>
    <div class="item">
      <p>3</p>
    </div>
    <div class="item">
      <p>4</p>
    </div>
    <div class="item">
      <p>5</p>
    </div>
    <div class="item">
      <p>6</p>
    </div>
    <div class="item">
      <p>7</p>
    </div>

Answer 1

如果只希望它们并排显示，则可以将display: flex添加到div类别中，如下所示：

#categories{
  display: flex;
  -webkit-column-count: 4;-moz-column-count: 4;column-count: 4;
    -webkit-column-gap:1em;-moz-column-gap:1em;column-gap: 1em;
}

flex的默认值是显示为一行（例如：水平）。

查看此链接以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/flex

编辑：

我认为使用网格可能会更好地解决您的问题。如果您尝试按照以下方式进行操作，则应该可以：

#categories{
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap:1em;
  -moz-column-gap:1em;
  column-gap: 1em;
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(80px, 1fr));
  grid-auto-rows: 80px;
  grid-auto-flow: dense;
}

.item{
    display: inline-block;
    margin: 0 0 1em;
    padding:1em;
    width: 100%;
    border:3px solid #fff;
    border-radius: 30px;
    height:100px;
}

.item p{color:#59a3b6;text-align:center;font-weight:500;}

#categories .item:nth-child(1n+2){
  height:200px; 
  grid-row: span 1; 
  grid-column: span 2;}

#categories .item:nth-child(2n){height:250px; grid-row: span 2; grid-column: span 1;}

#categories .item:nth-child(3n){
  height:120px;
  grid-row: span 4; 
  grid-column: span 4;
}

#categories .item:nth-child(4n){
  height:140px;
  grid-row: span 1; 
  grid-column: span 1;
}

#categories .item:nth-child(5n){
  height:300px;
  grid-row: span 3; 
  grid-column: span 6;
}

基本上，我将display: grid;添加到了父项，然后将grid-row: span 1; grid-column: span 2;网格添加到了子项。您仍然必须尝试使用它，但是它应该可以使您逐步达到所需的状态。

在这段视频之后，她在解释概念上做得很出色。

希望这会有所帮助，祝您好运！

CSS列数-水平对齐-砌体网格

1 个答案: