Can we float 2 divs side by side and 3rd one below them?

问题

I want to arrange 3 divs, according to the screen width as follows:

For screen-width of < 500px arrangement should be as follows :

For screen-width of > 500px arrangement should be as follows :

I have tried achieving this in screen size of > 500px but i don't know how to use the same code to achieve arrangement for <500px.

My doubt is, can I use the same piece of code to get both the arrangements or is there any other approach ? Can flexbox be used to solve the issue?

Here is the snippet:

.container {
  display: flex;
}

.divA {
  flex: 0 0 40%;
  align-self: flex-end;
}

.container-2 {
  display: flex;
  flex: 0 0 60%;
  flex-direction: column;
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="container-2">
    <div class="divB">
      B
    </div>
    <div class="divC">
      C
    </div>
  </div>
</div>

回答1:

edit

after seeing your question update , mediaquerie, flex, order , and a pseudo to create that empty gap , should be enough. Still with each 3 boxes direct child of .container.

run the code snippet in fullpage mode and resize your browser , break point set at 700px for the demo.

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.divA {
  background: lightgreen;
}

.divB {
  background: lightblue;
}

.divC {
  background: rgb(255, 255, 0);
}

.container>div,
.container:before {
  flex: 1;
  min-width: 40%;
  padding: 1em 0;
  text-align: center;
}

@media (min-width: 700px) {
  /* upadte here the px value where you swhitch to happen . 500px */
  .divA,
  .divC {
    order: 1;
    flex: 0 1 40%;
  }
  .container .divB,
  .container .divC {
    flex: 0 1 60%;
  }
  .container:before {
    content: "";
    flex: 0 1 40%;
  }
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

original answer left here for infos

you may switch from a flex layout to a table or grid layout with each elelemnts as sibblings, no need of extra markup here.

exemple : flex/table , it would be for browser still having issues with grid

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  border: solid;
  min-width: 40%;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .container {
    display: table;
    width: 100%;
    table-layout: fixed;
    ;
  }
  .divA {
    display: table-cell;
    width: 50%;
  }

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

or grid (mind version of IE which supports grid partially and requires to set grid-row/grid-column or grid-area for each children)

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container>div {
  border: solid;
}

.divC {
  grid-row: 2;
  grid-column:1 / span 2;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .divC {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

回答2:

How:

This can be achieved with css grid

If you are open to grid solution, You need to change your html structure a bit. With flex that's impossible.

Solution:

Here is what I would do:

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px 200px;
  grid-gap: 0;
}

.divA {
  background-color: lightgreen;
}

.divB {
  background-color: lightblue;
}

.divC {
  grid-column: 1 / span 2;
  background-color: yellow;
}

@media screen and (min-width: 500px) {
  .divA {
    grid-column: 2 / 1;
    grid-row: 2 / 2

  }
  .divB {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  .divC {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

Explanation:

grid-template-columns lets you define the column widths of your grid elements, and same does the grid-template-rows for rows heights.
For each grid element, you can specify how many elements they should span ( such as table cell can span columns or rows ) with grid-column. Learn more here or google this property. Your divC has spanned 2 elements in a column.
Now for your responsiveness, write a media query to define your styles for screen-width more than 500px, and reset your .divCs grid-column and grid-row and add the same for your .divA. (Since this element now spans 2 elements in a row)

来源：https://stackoverflow.com/questions/58694585/can-we-float-2-divs-side-by-side-and-3rd-one-below-them

标签

html

css

responsive-design

flexbox