如何根据高度或最大元素在列中显示元素？ [英] How to display elements in columns based on height or max elements?

问题描述

 < div id =wrapper>假设我有6个对象，输出是这样的： 
< div id =obj1>< / div> 
< div id =obj2>< / div> 
< div id =obj3>< / div> 
< div id =obj4>< / div> 
< div id =obj5>< / div> 
< div id =obj6>< / div> 
< / div> 
  

使用 CSS 属性可以在不改变我的 wrap 的html结构的情况下输出以下内容：

解决方案

您可以使用CSS网格布局，通过使用 grid-auto-flow 和 grid-template-rows

  #wrapper {display：grid; grid-template-rows：repeat（3，1fr）; grid-auto-flow：列; grid-gap：10px}＃wrapper> div {background-color：gray;填充：10px; color：white}  

< div id =wrapper > < div id =obj1> 1< / div> < div id =obj2> 2< / div> < div id =obj3> 3< / div> < div id =obj4> 4< / div> < div id =obj5> 5< / div> < div id =obj6> 6< / div>< / div>

---

其他可能的解决方案是CSS列

  #wrapper {columns：2;}＃wrapper> div {background-color：grey;填充：10px; margin-bottom：10px; color：white}  

< div id =wrapper > < div id =obj1> 1< / div> < div id =obj2> 2< / div> < div id =obj3> 3< / div> < div id =obj4> 4< / div> < div id =obj5> 5< / div> < div id =obj6> 6< / div>< / div>

Let's assume I have 6 objects and my output is this:

<div id="wrapper">
    <div id="obj1"></div>
    <div id="obj2"></div>
    <div id="obj3"></div>
    <div id="obj4"></div>
    <div id="obj5"></div>
    <div id="obj6"></div>
</div>

Using a CSS property is it possible to output this below without change the html structure of my wrap?

解决方案

You can use CSS grid layout, by using grid-auto-flow and grid-template-rows

#wrapper {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-gap: 10px
}

#wrapper>div {
  background-color: grey;
  padding: 10px;
  color: white
}

<div id="wrapper">
  <div id="obj1">1</div>
  <div id="obj2">2</div>
  <div id="obj3">3</div>
  <div id="obj4">4</div>
  <div id="obj5">5</div>
  <div id="obj6">6</div>
</div>

---

Other possible solution to take in consideration is CSS Columns

#wrapper {
  columns: 2;
}

#wrapper>div {
  background-color: grey;
  padding: 10px;
  margin-bottom: 10px;
  color: white
}

<div id="wrapper">
  <div id="obj1">1</div>
  <div id="obj2">2</div>
  <div id="obj3">3</div>
  <div id="obj4">4</div>
  <div id="obj5">5</div>
  <div id="obj6">6</div>
</div>

这篇关于如何根据高度或最大元素在列中显示元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！