Links, rechts und zentriert divs

Question

Ich versuche, eine Seite zu erstellen, die mehrere 3 Divs in einer Reihe hat, die links rechts und in der Mitte ausgerichtet sind.

Ich versuchte mit und float:right aber es funktionierte wirklich schlecht. Die Seite skaliert super zufällig und ich möchte die divs in 2 Spalten, wenn die Seite nach unten und dann auf 1 Spalte für mobile Geräte skaliert werden.

.container { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.left, 
 
.middle, 
 
.right { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div class="container"> 
 

 
    <div class="left"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="middle"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="content"> 
 
    </div> 
 
    </div> 
 

 
</div>

jsFiddle: https://jsfiddle.net/azizn/j4cgef5g/

Answer 1

Schauen Sie sich die Beispiele an, die ich unten aufgeführt habe (CSS und HTML-Skript)

HTML

<div id='columns'> 
    <div id='col1'></div> 
    <div id='col2'></div> 
    <div id='col3'></div> 
</div> 

CSS

#columns{ 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

#columns #col1{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 


#columns #col2{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 


#columns #col3{ 
    float: left; 
    width: 33.33%; 
    height: 100%; 
} 

@media media only screen and (max-width:1024px) and (min-width:540px){ 
    #columns #col1{ 
     width: 50%; 
    } 


    #columns #col2{ 
     width: 50%; 
    } 


    #columns #col3{ 
     width: 100%; 
    } 
} 

@media media only screen and (max-width:540px){ 
    #columns #col1{ 
     width: 100%; 
    } 


    #columns #col2{ 
     width: 100%; 
    } 


    #columns #col3{ 
     width: 100%; 
    } 
} 

Beachten Sie, dass ich das obige Beispiel nicht tatsächlich getestet habe, aber es sollte funktionieren. Sie können Ihre Breiten- und Höhenwerte sowie die Breiten für die Medienabfragen nach Wunsch bearbeiten. Wenn der Bildschirm kleiner wird, werden die Spalten 3 und 2 aus der Anzeige entfernt, während die anderen Spalten größer werden. Um die drei Spalten in der linken, mittleren und rechten Position zu setzen, müssen Sie keine unterschiedlichen Gleitkommazahlen angeben, da sie in Blöcken sind und automatisch auf der linken Seite kollidieren und stapeln, bis sie auf die Bildschirmkante treffen. Dies ist auch der Grund, warum die Breite im Allgemeinen nur 33,33% betragen kann, da 33,333% im Allgemeinen den dritten Block nach unten drücken, da nicht genug Platz vorhanden ist. In den meisten Fällen ist der 0,01% Totraum nicht bemerkbar.

Answer 2

Dies ist ein Use-Case-Lehrbuch für Flexbox:

.container{ 
    display: flex; 
    justify-content: space-between; 
} 

Hier ein Beispiel: http://codepen.io/memoblue/pen/XKQqGg

Es gibt viele wa Um mit dem responsiven Aspekt umgehen zu können, müsste ich genauer wissen, wie das Layout an den verschiedenen Breakpoints aussehen soll.