Question

我正在尝试构建如下所示的布局：

section {
  display: flex;
  flex-wrap: wrap;
}

div {
  width: 30vw;
  height: 20vw;
  background: floralwhite;
  margin: 0 5vw 10vh 5vw;
}

div:first-of-type {
  margin-left: 0;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

除此之外，问题是其他<div>个元素被添加为新行。

如何将新的<div>元素添加为新列，以实现此布局？

Answer 1

在CSS中更改此内容：

query_wo_inc="select r.* 
from test_table.reservations r
where id NOT IN (select id from inc_table.reservations);"

test_query_wo_inc=\"$(echo $query_wo_inc)\"
echo $query_wo_inc

bq query --use_legacy_sql=false --destination_table='staging_test_table.'reservations $test_query_wo_inc

# load the incremental data on the staging table
query_inc="select r.* from inc_table.reservations r"
test_query_inc=\"$(echo $query_inc)\"
echo $query_inc

bq query --use_legacy_sql=false --append_table=true --destination_table='staging_test_table.'reservations $test_query_inc
if [ $? -ne 0 ];then
echo "could not create the staging table"
exit 
fi
# re-create the full table
bq rm -f -t test_table.reservations
bq cp staging_test_table.reservations test_table.reservations
bq rm -f -t inc_table.reservations

Answer 2

我遇到的问题是您需要在<section>上指定一个高度，以便新的列显示在右侧而不是下方。

section {
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-x: auto;
  height: 100vh;
}

div {
  width: 30vw;
  height: 40vh;
  background: floralwhite;
  margin: 0 5vw 10vh 5vw;
}

div:nth-of-type(2n + 1) {
  margin-left: 0;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

如何在此布局中将新的flex元素添加为列而不是行？

2 个答案: