Wie Responsive div nebeneinander ohne Verwendung von Float-Eigenschaft zu machen

<div class="logo-social-box">/*Main Container*/ 
    <div class="logo">/*First Div*/ 

    </div> 
    <div class="social-box">/*Second Div*/ 

    </div> 
</div>

Ich möchte 'Logo' und 'Social-Box' nebeneinander setzen. Aber ich will, dass sie reagieren.Wie Responsive div nebeneinander ohne Verwendung von Float-Eigenschaft zu machen

Quelle

2016-07-14 Rohit Sharma

Was mit mit 'float' falsch? (wie im Titel der Frage "ohne float zu verwenden", aber der Grund wird in der Frage nicht erwähnt) –

Das Element reaktionsfähig zu machen schließt sich nicht gegenseitig mit 'float' aus - Sie können beides tun. Die Alternative zum Floaten wäre, sie absolut zu positionieren, obwohl dies eine andere Reihe von Problemen verursacht. –

Wenn ich die Eigenschaft float verwende, werden alle Elemente mit der Eigenschaft 'display: inline-block' gestört. –

Verwenden display: flex

.logo-social-box { 
 
    display: flex; 
 
} 
 

 
.logo-social-box .logo { 
 
    background: #aaa; 
 
    padding: 5px; 
 
} 
 
.logo-social-box .social-box { 
 
    flex: 1; 
 
    padding: 5px; 
 
    background: #ddd; 
 
}

<div class="logo-social-box"> 
 
    <div class="logo">/*First Div*/ 
 

 
    </div> 
 
    <div class="social-box">/*Second Div*/ 
 

 
    </div> 
 
</div>

Quelle

2016-07-14 08:58:19 LGSon

Danke! Es funktioniert. –

@RohitSharma Großartig, dann denke darüber nach, meine Antwort auch zu akzeptieren – LGSon

Wie Responsive div nebeneinander ohne Verwendung von Float-Eigenschaft zu machen

Antwort

Verwandte Themen