html中元素的排列答案

【问题标题】：Arrangement of elements in htmlhtml中元素的排列
【发布时间】：2019-10-09 16:08:58
【问题描述】：

这种结构可以用html + css实现吗？

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

我使用过 flex 和 grid，但到目前为止还没有真正成功:(

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

【问题讨论】：

你可以重新排列 div

I AM BIG 1

I AM小 1

我是大 2

我是小 2

我是大 3

I AM BIG 4

或者如果你不想重新排列 html 结构，那么你可以在 css 中使用 order 属性。参考：css-tricks.com/almanac/properties/o/order
您也许可以使用grid-area 做到这一点。这是一个非常有用的指南：css-tricks.com/snippets/css/complete-guide-grid
您可以使用 Bootstrap 框架来完成您的任务。如果您已经有了现成的东西，为什么要编写自定义代码，您可以使用框架并可以专注于您的其他开发任务。

标签： html css flexbox css-grid

【解决方案1】：

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

您可以使用grid-template-columns: 3fr 2fr;，因为big 和small 元素的比例为60% 到40%，
可以使用grid-auto-rows: 100px设置行高，
可以使用grid-row-gap属性设置行间距，
现在使用grid-column: 1 将big 设置为始终占据第一列，将small 设置为始终占据第二列。

目前的配置见下面的demo：

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

现在只需添加 grid-auto-flow: dense 即可将橙色块拉到顶部 - 请参阅下面的演示：

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

【讨论】：

这看起来不错，正是我需要的，但如果我有 3 种尺寸也可以吗？我的意思是 3 个区块，比如 30% 40% 和另外 30%

【解决方案2】：

您可以通过将divs 的顺序更改为

<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="small"> I AM SMALL 2 </div>
    <div class="big"> I AM BIG 3</div>
    <div class="big"> I AM BIG 4</div>  
</div>

希望这是您一直在寻找的。p>

【讨论】：

【解决方案3】：

如果您打算使用 flex，我建议您将容器分成两列，这样更容易做到这一点。这是我为实现这一目标所做的测试代码。希望对你有帮助。

HTML

<div class="d-flex flex-row">
  <div class="d-flex flex-column mr-1">
    <div class="big-box">
      BOX 1
    </div>
    <div class="big-box">
      BOX 2
    </div>
    <div class="big-box">
      BOX 3
    </div>
    <div class="big-box">
      BOX 4
    </div>
  </div>
  <div class="d-flex flex-column">
    <div class="small-box">
      BOX 5
    </div>
    <div class="small-box">
      BOX 6
    </div>
  </div>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}

JS 小提琴链接：https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/

【讨论】：

【解决方案4】：

.main{
border: 1px solid red;
padding: 5px;
display:flex;
justify-content:space-between;
}
.left{
width:59.8%; 
}
.right{
width:39.8%;
position:relative;
display:block;
}
.right .orange-block:last-child{
  position:absolute;
  display:block;
  bottom:0;
  width: -webkit-fill-available;
}
.lime-block,.orange-block{
  margin-bottom:5px;
  height:80px;
  padding:5px;
}
.lime-block:last-child,.orange-block:last-child{
  margin-bottom:0px;
}
.lime-block{
  background:lime;
}
.orange-block{
  background:orange;
}

<body>
<div class="main">
<div class="left">
  <div class="lime-block">I AM BIG 1</div>
  <div class="lime-block">I AM BIG 2</div>
  <div class="lime-block">I AM BIG 3</div>
  <div class="lime-block">I AM BIG 4</div>
</div>
<div class="right">
  <div class="orange-block">I AM SMALL 1</div>
  <div class="orange-block">I AM SMALL 2</div>
</div>
</div>
</body>

【讨论】：

这是一个基于 flex 的简单代码，还支持动态内容。