如何根据高度或最大元素在列中显示元素？

Question

假设我有6个对象，我的输出是这样的：

dt_1 <- lubridate::ymd_hms("2001:1:1 2:0:0")
dt_2 <- lubridate::ymd_hms("2004:1:1 1:0:0")

paste(
 paste(
 year(as.period(int_diff(c(dt_2, dt_1)))),
 month(as.period(int_diff(c(dt_2, dt_1)))),
 day(as.period(int_diff(c(dt_2, dt_1)))),
sep = ":"),
paste(
 hour(as.period(int_diff(c(dt_2, dt_1)))),
 minute(as.period(int_diff(c(dt_2, dt_1)))),
 second(as.period(int_diff(c(dt_2, dt_1)))),
sep = ":"),
sep = " ")

使用<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> 属性可以在不更改CSS的html结构的情况下输出以下内容吗？

Answer 1

您可以使用grid-auto-flow和grid-template-rows

来使用CSS网格布局

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

要考虑的其他可能的解决方案是CSS Columns

＆＃13;

＆＃13;

#wrapper {
  columns: 2;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据您的评论我已更新并使用CSS列并通过column-gap设置间距：

body {
  margin: 0;
}

#wrapper {
  -webkit-column-count: 2;  /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  column-gap: 5px;
}

#wrapper>div {
  width: 100%;
  height: 100px;
  background-color: grey;
  margin-bottom: 5px;
}

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

Answer 3

您可以在包装器上使用display:flex属性

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 70px;
  width: 400px;
}

#wrapper>div {
  width: 49%;
  height: 20px;
  display: inline-block;
  border: solid 1px #fff;
  background-color: #ccc;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

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

Answer 4

是的，根据您想要的控制量（即，如果您想绝对控制每个块的位置），您可以使用Flexbox和order属性：

#wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
}
#wrapper div {
  padding: 20px;
  background gray;
  flex: 0 0 50%;
  box-sizing: border-box;
}

#wrapper div:nth-child(1) {
  order: 1;
}
#wrapper div:nth-child(2) {
  order: 3;
}
#wrapper div:nth-child(3) {
  order: 5;
}
#wrapper div:nth-child(4) {
  order: 2;
}
#wrapper div:nth-child(5) {
  order: 4;
}
#wrapper div:nth-child(6) {
  order: 6;
}

<div id="wrapper">
    <div id="obj1">Obj1</div>
    <div id="obj2">Obj2</div>
    <div id="obj3">Obj3</div>
    <div id="obj4">Obj4</div>
    <div id="obj5">Obj5</div>
    <div id="obj6">Obj6</div>
</div>

Codepen example