Arrangement of elements in html

问题

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>

回答1:

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>

回答2:

If you are planning on using flex I would suggest you break up your container into two columns which makes it easier to do this. This a test code I have done to achieve that. Hope it helps you.

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 Fiddle Link : https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/

回答3:

You can simply modify this by changing the order of your divs as

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

Hope this is what you've been looking for.

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

来源：https://stackoverflow.com/questions/56269202/arrangement-of-elements-in-html

标签

html

css

css3

flexbox

css-grid