HTML中元素的排列 [英] Arrangement of elements in html

问题描述

是否可以使用html + css来实现这种结构？

但是我不想在橙色块之间留有垂直空间，而是想成为另一个块的顶部。

到目前为止，我还没有使用flex和grid，但实际上并没有成功：（

解决方案

您可以使用CSS网格布局轻松地做到这一点：

• 您可以使用 grid-template-columns：3fr 2fr; 因为您大和小元素的比例为60％至40％，




• 行高可以使用 grid-auto-rows设置：100px ，



• 可以使用 grid-row-gap 属性设置行之间的

  页边距，




• 现在已设置 big 以始终使用 grid-column：1 和 small 始终占据第二个位置。

有关当前配置，请参见下面的演示：

  .container {padding：10px;边框：1px纯红色；显示：网格； grid-template-columns：3fr 2fr; grid-auto-rows：100px; grid-row-gap：10px;}。big {padding：10px;背景：石灰； grid-column：1;}。small {padding：10px;背景：橙色；网格列：2;}  

 < div class = 容器> < div class = big>我大1< / div> < div class = small>我很小1< / div> < div class = big>我大2< / div> < div class = big>我大3< / div> < div class = big>我大4< / div> < div class = small>我是小2< / div>< / div>  

现在只需添加 grid-auto-flow：density 将橙色块拉到顶部-参见下面的演示：

  .container {padding：10px;边框：1px纯红色；显示：网格； grid-template-columns：3fr 2fr; / *两列* / grid-auto-rows：100px; / *行高* /网格行间距：10px; / *行间距* / grid-auto-flow：密集； / *添加了* /}。big {padding：10px;背景：石灰；网格列：1； / *在第一列* /}中。small{padding：10px;背景：橙色；网格列：2； / *在第二列* /}  

 < div类=容器> < div class = big>我大1< / div> < div class = small>我很小1< / div> < div class = big>我是BIG 2< / div> < div class = big>我大3< / div> < div class = big>我大4< / div> < div class = small>我是小2< / div>< / div>  

Is possible to achieve this structure using html + css ?

But instead of having that vertical space between orange blocks I want to be one in the top of another.

I have used flex and grid but not really succeed so far :(

jsfiddle:

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

解决方案

You can do this easily with CSS grid layout:

• you can use grid-template-columns: 3fr 2fr; because you have 60% to 40% ratio of the big and small elements,

• row heights can be set using grid-auto-rows: 100px,

• margin between rows can be set using grid-row-gap property,

• now set the big to always occupy the first column using grid-column: 1 and the small to always occupy the second.

See demo below for the configuration upto now:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

Now just add grid-auto-flow: dense to pull the orange blocks to the top - see demo below:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

这篇关于HTML中元素的排列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！