Arrange divs in blocks one over the other?

Question

Arrange divs in blocks one over the other?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (-2 votes)

3

I'd like to organize my divs in column form, but not side by side, but rather one over the other. Normally when using float: left or display: inline-block the elements are placed side by side up to the size limit, and then a new line is created, eg:

|DIV 1|   |DIV 2|   |DIV 3|

|DIV 4|   |DIV 5|   |DIV 6|

|DIV 6|   |DIV 7|   |DIV 8|

But I wish they would look like this:

|DIV 1|   |DIV 4|   |DIV 7|

|DIV 2|   |DIV 5|   |DIV 8|

|DIV 3|   |DIV 6|   |DIV 9|

I do not want to have to create several columns and put each div there, I want them to organize themselves this way, how can I do it?

float css display flexbox

asked by anonymous 19.07.2018 / 00:48

3 answers

1

If you know how much height the cantainer should have, you can do this:

body {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 60px;
}

<body>
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
  <div>DIV 4</div>
  <div>DIV 5</div>
  <div>DIV 6</div>
  <div>DIV 7</div>
  <div>DIV 8</div>
  <div>DIV 9</div>
</body>

To increase and decrease the number of columns just change the height

22.07.2018 / 19:29

-2

What is happening friend, is that you are not using the proper html structure to do this, float is not a good idea, use the display: inline-block that is better.

To get this layout, you need to structure your html for this, here is an example of how to do

.wrapper {
  display:block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}

.wrapper .column {
  display: inline-block;
  width: 32%;
}

.column div {
  width: 90%;
  background: #ccc;
  text-align: center;
  margin: 10%;
}

<div class="wrapper">
  <div class="column">
    <div>
      1
    </div>
    <div>
      2
    </div>
    <div>
      3
    </div>
  </div>
  <div class="column">
    <div>
      4
    </div>
    <div>
      5
    </div>
    <div>
      6
    </div>
  </div>
  <div class="column">
    <div>
      7
    </div>
    <div>
      8
    </div>
    <div>
      9
    </div>
  </div>
</div>

19.07.2018 / 01:17

How to make the player move on a slide in unity? Is it possible to interpolate a string already declared in C #? [duplicate]

score 1 · Accepted Answer

You can use the column-count property and set how many columns you want, in the example I put 3 columns. The property always tries to optimize the distribution in an automated way among all three columns, regardless of the amount of divs you have inside.

Here is the Mozilla documentation on this property link

See the example to understand better:

.colunas {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<div class="colunas">
    <div>DIV 1</div>
    <div>DIV 2</div>
    <div>DIV 3</div>
    <div>DIV 4</div>
    <div>DIV 5</div>
    <div>DIV 6</div>
    <div>DIV 7</div>
    <div>DIV 8</div>
    <div>DIV 9</div>
</div>

TIP:

It's even easier to make the speakers responsive, since you can change this number depending on the width of the screen. In the model below when the screen is smaller than 768px it goes from 3 to 2 columns

.colunas {
    -webkit-column-count: 3; /
    -moz-column-count: 3; 
    column-count: 3;
}

@media screen and (max-width: 768px) {
    .colunas {
        -webkit-column-count: 2; 
        -moz-column-count: 2; 
        column-count: 2;
    }
}

OBS:

With display:flex you need to set a height to container
With column-count you do not need to set height of parent element or number of rows
With display:grid you need to define a number of automatic rows , as well as width, may be an option to consider