0

I tried this html and CSS ,

.divcss{ width: 48%; margin-right: 5px; margin-bottom: 8px; vertical-align: top; display: inline-block; }
<div> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>

It's not compulsory to only 6 div's, it comes dynamically

I want to align div in this order:-

Div1 Div4

Div2 Div5

Div3 Div6

3
  • read about columns Commented Jan 29, 2020 at 10:03
  • @TemaniAfif I tried but fails :( Commented Jan 29, 2020 at 10:10
  • Try this: stackoverflow.com/a/50694753/746736 Commented Jan 29, 2020 at 10:10

3 Answers 3

2

Add a additional class to your parent div, defining the column layout.

CSS:

.divcss { width: 48%; margin-right: 5px; margin-bottom: 8px; vertical-align: top; display: inline-block; } .layout { columns: 2; height: 50%; } 

HTML:

 <div class="layout"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div> 
Sign up to request clarification or add additional context in comments.

1 Comment

It solves my problem in an easier way. Thanks a lot @Sasi Kumar M
1

Check this. Hope it helps.

.columns{ width: 50%; /*vertical-align: top; display: inline-block;*/ float: left; } .divcss{ display:block; margin-right: 5px; margin-bottom: 8px; }
<div> <div class="columns"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="columns"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div> </div>

Comments

0

you just gotta make two columns or even just one, and put your content in them/it i like to make two to give each column a style.

<style> .divcss{ width: 200px; margin-right: 5px; margin-bottom: 8px; vertical-align: top; } .rcolumn { float:left; } .lcolumn { float:left; } </style>
<div class="lcolumn"> <div class="divcss"> Div1 </div> <div class="divcss"> Div2 </div> <div class="divcss"> Div3 </div> </div> <div class="rcolumn"> <div class="divcss"> Div4 </div> <div class="divcss"> Div5 </div> <div class="divcss"> Div6 </div> </div>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.