Come posso galleggiare due div a sinistra (sotto l'altro) e due div di destra (sotto l'altro)

Question

sto cercando questo:

DIV 1 DIV 3 
DIV 2 DIV 4 

<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 
<div class="div4"></div> 

Sto cercando di utilizzare clear: both ma fa una margine superiore ..

Utilizza altre div a galleggiare a sinistra 1 e 2 e galleggiano destra 3 e 4 non è un'opzione in questo caso ..

Ecco il mio css:

.div1 { 
    height:69px; 
    float:left; 
    width:48%; 
    clear:both; 
    background:pink; 
} 

.div2 { 
    height:200px; 
    margin-top:10px; 
    display:block; 
    float:left; 
    width:48%; 
    clear:both; 
    background:lightblue; 
} 

.div3 { 
    height:69px; 
    line-height:30px; 
    float:right; 
    width:48%; 
    background:red; 
} 

.div4 { 
    height:200px; 
    float:right; 
    width:48%; 
    background:yellow; 
    clear:both; 
} 

Answer 1

Provare a modificare l'ordine dell'HTML e modificare la cancellazione dei div.

<div class="div1"></div> 
<div class="div3"></div> 
<div class="div2"></div> 
<div class="div4"></div> 

e CSS

.div1 { 
    height:69px; 
    float:left; 
    width:48%; 
    background:pink; 
    clear:left; 
} 

.div2 { 
    height:200px; 
    margin-top:10px; 
    display:block; 
    float:left; 
    width:48%; 
    background:lightblue; 
    clear:left; 
} 

.div3 { 
    height:69px; 
    line-height:30px; 
    float:right; 
    width:48%; 
    background:red; 
    clear:right 
} 

.div4 { 
    height:200px; 
    float:right; 
    width:48%; 
    background:yellow; 
    clear:right 
} 

JSFiddle: https://jsfiddle.net/6ywja6dn/

Answer 2

Ho avvolto i div a sinistra ea destra in un altro div chiamato "wrap1". Ecco il violino. https://jsfiddle.net/4j4jasgn/1/ o si deve cambiare l'ordine del div come - div1, div3, div2, DIV4

<div class="wrap1"> 
<div class="div1">1</div> 
<div class="div2">2</div> 
</div> 
<div class="wrap1"> 
<div class="div3">3</div> 
<div class="div4">4</div> 
</div> 

Answer 3

Puoi riordinare i div che hai? In tal caso, è possibile sostituire le regole di stile "display: block", "float" e "clear" con "display: inline-block" (per tutte e quattro le div).

Quindi è necessario riordinare i div come (1, 3, 2, 4) in modo che corrispondano al layout originale.

Answer 4

<style type="text/css"> 
    .left-block{ 
    float: left; 
    clear:left; 
    width: 50%; 
    } 
    .right-block{ 
     margin-left: 50%; 
    } 
</style>  
<div class="div1 left-block">Div 1 with float left</div> 
<div class="div2 left-block">Div 2 with float left</div> 
<div class="div3 right-block">Div 3 No float</div> 
<div class="div4 right-block">Div 4 No float</div> 

Answer 5

Le risposte di cui sopra non sono in linea con quanto ai desiderata. Dice che non può cambiare l'ordine dei div.

Come div sono lanciata in relazione l'elemento più vicino flottante, non è possibile galleggiare div 3 accanto div 1.

La soluzione è quella di dare div 1 un galleggiante sinistra, div 2 un galleggiante sinistra, div 3 una posizione assoluta e div 4 un float a destra. Questa è anche una soluzione reattiva, in quanto i div 3 e 4 si posizionano sotto div 1 e 2.

Vedere questo esempio, spostare la linea centrale verticale per rendere lo schermo più piccolo e vedere il div allineamento sotto l'altro.

https://jsfiddle.net/6ywja6dn/2/

.div.one { float: left; background: blue; } 
.div.two { float: left; clear: left; background: red; } 
.div.three { position: absolute; top: 0px; left: 52%; background: purple; } 
.div.four { float: right; background: green; } 

@media (max-width: 600px) { 
.div.one { } 
.div.two { } 
.div.three { position: static; float: left; clear: left; } 
.div.four { float: left; clear: left; } 
}