Proper float css Gitter

-1

Wenn ich CSS Grid schwebte wie dieseProper float css Gitter

.float { 
    float: left; 
    width: 45%; 
    border: 1px solid black; 
    margin: 1%; 
    padding: 1%; 
}

Wie kann ich jede neue Linie zu zwingen, auf demselben Horizontes Ebene ausgerichtet werden?

http://codepen.io/anon/pen/Kzezjp?editors=1100

Quelle

2016-04-19 Karolina Ticha

Meinen Sie in Zeilen oder so - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view- with-css –

min-height einstellen funktioniert (aber jeder Container überschreitet min-height, dann wird er minimiert) –

-1

Ich glaube, Sie vertical-align und Sie sollten die Breite verringern verwenden möchten:

.float { 
     float: left; 
     width: 45%; 
     border: 1px solid black; 
     margin: 1%; 
     padding: 1%; 
    vertical-align:middle; 
width:30%; 
    }

Quelle

2016-04-19 12:02:34

Vertical align funktioniert nicht auf Floats –

Wenn Sie jede effektive Zeile wollen auf einem neuen vertikalen Ebene starten, Sie müssen die Schwimmer nach jedem 2. Div löschen.

Codepen Demo

.float { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 45%; 
 
    border: 1px solid black; 
 
    margin: 1%; 
 
    padding: 1%; 
 
} 
 
div:nth-of-type(2n+1) { 
 
    clear: left; 
 
}

<div class="float"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
 
    nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien. 
 
</div> 
 
<div class="float"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. 
 
</div> 
 

 
<div class="float"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
 
    nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien. 
 
</div> 
 
<div class="float"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. 
 
</div>

Quelle

2016-04-19 12:06:45

Antwort

Verwandte Themen