Good evening, I have the following structure of divs: 1 | 2 | 3 | 4 | 5 | 6 What I need to do is that this structure looks like this:
1 | 3 | 5
2 | 4 | 6
A single detail is that I need to do this only using CSS, without adding any more div to the structure. My code goes here:
One solution is to fix CSS like this:
.teste{
width:100px;
height:100px;
background-color:red;
float:left;
margin-left:10px;
position: absolute;
}
.teste:nth-child(even){
margin-top: 120px;
}
.teste:nth-child(4), .teste:nth-child(3){
left: 120px;
}
.teste:nth-child(6), .teste:nth-child(5){
left: 230px;
}
Notice that I've changed your duplicate ID's for classes. I added position: absolute to the class, and then I gave rules more or less to each element.
My solution, assuming you can set the display property of the parent element of these elements, is to use the display: flex, and set the order properties to set the order of the elements within this div. It is important to set a maximum width to make the elements go down to the next line, and flex-wrap: wrap serves to make the elements "break" to the next line when the boundary of a div is found.
.container {
display: flex;
flex-wrap: wrap;
max-width: 30px;
}
.els:nth-child(1) {
color: red;
order: 1
}
.els:nth-child(2) {
order: 4
}
.els:nth-child(3) {
order: 2
}
.els:nth-child(4) {
order: 5
}
.els:nth-child(5) {
order: 3
}
.els:nth-child(6) {
order: 6
}<div class="container">
<div class="els">1</div>
<div class="els">2</div>
<div class="els">3</div>
<div class="els">4</div>
<div class="els">5</div>
<div class="els">6</div>
</div>