Sort div in columns

Question

Sort div in columns

Navigation

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

3

I'm developing a website where I have a <div> (fixed size) and I'm adding small <div> through JavaScript with appendChild() .

The fact is that I can not do what I want, my idea is that they are added as follows:

----------------------------------------------
|              |              |              |
|      1º      |      5º      |      9º      |
|              |              |              |
----------------------------------------------
|              |              |              |
|      2º      |      6º      |      10º     |
|              |              |              |
----------------------------------------------
|              |              |              |
|      3º      |      7º      |      11º     |
|              |              |              |
----------------------------------------------
|              |              |              |
|      4º      |      8º      |      12º     |
|              |              |              |
----------------------------------------------

As such, I will create columns of 4 rows.

Let's see if anyone can help me out.

Thanks in advance!

javascript html css web

asked by Jmyebenes 16.10.2017 в 12:21

source

3 answers

1

GRID

Use grid to divide the divs into "cells".

Here is an example.

.grid {
  display:grid;
  grid-template-areas: "head head"
                       "menu main"
                       "foot foot";
}

.a { grid-area:head; background:blue }
.b { grid-area:menu; background:red }
.c { grid-area:main; background:green }
.d { grid-area:foot; background:orange }

<div class="grid"> <!-- contenedor -->
  <div class="a">Item 1</div> <!-- cada uno de los ítems del grid -->
  <div class="b">Item 2</div>
  <div class="c">Item 3</div>
  <div class="d">Item 4</div>
</div>

answered by 16.10.2017 в 13:12

0

By first creating columns and adding elements to them, you can do something like the following:

#container {
  height: 200px;
  width: 300px;
  position: relative;
}
.columna {
  width: 33%;
  height: 100%;
  float: left;
  
}
.columna div {
  height: 25%;
  width: 99%;
  margin: 5px;
  background: red;
}

<div id="container">
  <div class="columna">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
   <div class="columna">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  
   <div class="columna">
   
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

answered by 16.10.2017 в 13:20

Problem with a variable in C Problem when placing and deleting elements of a textarea html select

score 3 · Accepted Answer

By default HTML elements are sorted from left to right but with CSS we can change that order to our liking. The form that offers us more possibilities and also the simplest, for me at least, is flexbox.

You need a container that has flex as the value of the property display and tell it to sort in columns instead of rows and make the elements conform to their container with flex-wrap:wrap . We also have to adjust the height so that only the number of boxes we want and then play with the flex property and the alignments according to what we want to achieve.

Here is an example of how it could be:

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 208px;
  border: solid 1px red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}

.create-route {
  width: 50px;
  flex: 0 1 50px;
  background-color: white;
  border: solid 1px #1c4051;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
}

<div id="container">
  <div class="create-route">
    1
  </div>
  <div class="create-route">
    2
  </div>
  <div class="create-route">
    3
  </div>
  <div class="create-route">
    4
  </div>
  <div class="create-route">
    5
  </div>
  <div class="create-route">
    6
  </div>
  <div class="create-route">
    7
  </div>
  <div class="create-route">
    8
  </div>
  <div class="create-route">
    9
  </div>
  <div class="create-route">
    10
  </div>
  <div class="create-route">
    11
  </div>
  <div class="create-route">
    12
  </div>
</div>