Here explain a way to display multiple <div> in column wise. To achieve this, we required one Parent <div>, and parent div contains multiple child <div>, we list child <div> in column wise.
To achieve this we just need a style like below.
<style>
*
{
box-sizing
: border-box
;
}
/* Create
equal columns that floats next to each other */
.column{
float:left
;
width:50%;
padding : 10px;
}
/* Clear
floats after the columns */
.row:after{
content : "";
display : table;
clear : both;
}
</style>
hope style is straight forward, width in
style-class .column and display in style-class .row:after is
crucial here. Width property defining number of column to be displayed.
HTML
you should required one parent and multiple
child <div> tags. Below is parent should look like below. Parent
should refer style-class "row"
<divname="parent"class="row"style="width:100%;">
Child should refer style-class "column"
and put your content under the <div> tag
<divname="child"class="column"style= "background: cornflowerblue" >
Once complete above, your child <div> will list in two column. If you decrease the width property of style-class .column to 30%, then <div> will list in 3 column, like that you could reduce the width to list desired level of columns.
HTML should be like below.
<divname="parent"style="width: 100%;"class="row">
<divname="child"class="column"style= "background: cornflowerblue" >
<divname="childcontent">
My Content 1
</div>
</div>
<divname="child"class="column"style= "background: cornflowerblue" >
<divname="childcontent">
My Content 2
</div>
</div>
<divname="child"class="column"style= "background: cornflowerblue" >
<divname="childcontent">
My Content 3
</div>
</div>
<divname="child"class="column"style= "background: cornflowerblue" >
<divname="childcontent">
My Content 4
</div>
</div>
</div>
Output
