Geek Answers Handbook

CSS layout issue. Arrange the div vertically in columns 4

I have a container with a set width and height. I have 20 elements inside. I would like to arrange them vertically in columns 4 and it is preferable to have the container scroll when the columns overflow along the x axis.

content 1    content 5    content 9     content 13    content 17   
content 2    content 6    content 10    content 14    content 18
content 3    content 7    content 11    content 15    content 19
content 4    content 8    content 12    content 16    content 20

Is there a way to achieve this using only CSS?

EDIT

Any solution should be supported in browsers as old as IE9

jsfiddle

+4
source share
3 answers

you can use flex

.container {
  height:180px;
  background-color:#fff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.container div{
  margin: 5px;
  height: 30px;
  background-color:red;
  color:white;
  border: solid thin black;
}
<div class="container" style="">

  <div>
    content 1
  </div>
  <div>
    content 2
  </div>
  <div>
    content 3
  </div>
   <div>
    content 4
  </div>
   <div>
    content 5
  </div>
   <div>
    content 6
  </div>
   <div>
    content 7
  </div>
   <div>
    content 8
  </div>
   <div>
    content 9
  </div>
    <div>
    content 10
  </div>
   <div>
    content 11
  </div>
   <div>
    content 12
  </div>
   <div>
    content 13
  </div>
   <div>
    content 14
  </div>
   <div>
    content 15
  </div>
   <div>
    content 16
  </div>
   <div>
    content 17
  </div>
    <div>
    content 18
  </div>
   <div>
    content 19
  </div>
   <div>
    content 20
  </div>  

</div>
Run codeHide result

An update based on the IE9 requirement (and also work for IE8) using display: table, but you can also use display: inline-block;orfloat: left;

.container {
  background-color:#fff;
  display: table;                /* delete this for inline-block and float */
}
.container > div{
  display: table-cell;           /* table-cell   */
  /* display: inline-block;  */  /* or inline             */
  /* float: left;            */  /* or float              */
}
.container > div > div{
  margin: 5px;
  height: 30px;
  background-color:red;
  color:white;
  border: solid thin black;
}
<div class="container" style="">

  <div>
    <div>
      content 1
    </div>
    <div>
      content 2
    </div>
    <div>
      content 3
    </div>
    <div>
      content 4
    </div>
  </div>

  <div>
    <div>
      content 5
    </div>
    <div>
      content 6
    </div>
    <div>
      content 7
    </div>
    <div>
      content 8
    </div>
  </div>

  <div>
    <div>
      content 9
    </div>
    <div>
      content 10
    </div>
    <div>
      content 11
    </div>
    <div>
      content 12
    </div>
  </div>

  <div>
    <div>
      content 13
    </div>
    <div>
      content 14
    </div>
    <div>
      content 15
    </div>
    <div>
      content 16
    </div>
  </div>

  <div>
    <div>
      content 17
    </div>
    <div>
      content 18
    </div>
    <div>
      content 19
    </div>
    <div>
      content 20
    </div>  
  </div>  

</div>
Run codeHide result
+5
source

Check here: Dynamic Layout

min-width: 200px;

, div , . , .

0

, (5px ) ( )

, jsFiddle 2

100%

.container div{
  float: left;
  margin: 0px 0px 1% 1%x;
  width: 22%;
  background-color:red;
  color:white;
  padding:1%;
  border: solid thin black;
}
Hide result

4 , 4 * 22% + 4 * 1% () + 4 * 2 * 1% ( ) = 100%

, , 100%, 4-

, , - http://getbootstrap.com/css/

0
source

More articles:


All Articles