Stellen Sie die gleiche Höhe Spalten

Ich habe Bildergalerie mit 4 Bildern.Stellen Sie die gleiche Höhe Spalten

Bilder können unterschiedliche Höhe haben, aber ich brauche mit html/css die gleiche Höhe Spalten (Bilder gestreckt).

Alles funktioniert gut, bis ich nicht <!DOCTYPE html> mit diesem DOCTYPE platziere

Alle anderen Seite funktioniert, so dass ich es nicht entfernen kann.

Wie fixiere ich meinen Code, dass er gut mit meinem DOCTYPE funktioniert?

img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
} 
 
.cb { 
 
    clear: both; 
 
} 
 
.fl { 
 
    float: left; 
 
} 
 
.fr { 
 
    float: right; 
 
} 
 
.col1 { 
 
    width: 40%; 
 
    flex-flow: column; 
 
    display: flex; 
 
} 
 
.col2 { 
 
    width: 60%; 
 
} 
 
.gallery-top { 
 
    display: flex; 
 
}

<div class="gallery-top"> 
 
    <div class="fl col1"> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=40" /> 
 
    </div> 
 
    <div class="" style="flex: 1; display: flex;"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=120" /> 
 
    </div> 
 
    <div class="cb"></div> 
 
    </div> 
 
    <div class="fl col2"> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" /> 
 
    </div> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" /> 
 
    </div> 
 
    <div class="cb"></div> 
 
    </div> 
 
    <div class="cb"></div> 
 
</div>

Quelle

2016-11-28 lolalola

Können Sie das Snippet mit einer guten Repro-Information aktualisieren? –

Wenn Sie '' verwenden, verwenden Sie html5. In HTML5 müssen Sie selbstschließende Tags wie '' – LuudJacobs

Der <!DOCTYPE html> teilt dem Browser mit, dass der Code vorhanden HTML5 ist, damit der Browser es richtig versteht. Alle Ihre Dokumente sollten es an Ort und Stelle haben.

Weitere Informationen finden Sie unter .

Ihr Markup (HTML) ist ein bisschen chaotisch, Sie haben leere Klassenattribute. Versuchen Sie zu immer halten Sie Ihren Code sauber und organisiert. Verwenden Sie Klassen, IDs und verweisen Sie sie in Ihrem Stylesheet ordnungsgemäß. Verwenden Sie nicht die Inline-Stile, es sei denn, Ihr spezifisches Problem erfordert sie.

Das heißt, ich schlage vor, dass Sie mehr über die Verwendung von Flexbox lernen und vermeiden Sie es inline für zukünftige Instanzen zu verwenden.

Sie können here.

ich gemacht Fiddlemehr über die Verwendung von Flex-Box finden Sie besser zu verstehen, das Konzept zu helfen.

Quelle

2016-11-28 16:36:39 snkv

nicht schließen. Danke für den Code, aber dieser Code funktioniert nur, wenn die Bilder die gleiche Höhe haben. Wenn in derselben Spalte ein Bild 40 und ein zweites 120 ist - dann erhalten Sie im unteren Bereich Leerraum. – lolalola

Dies könnte es sein https://jsfiddle.net/qe20e5ve/1/, aber die Spalten müssen mit einer festen gleichen Breite sein, sonst werden Sie die Lücken wieder erleben. Was Sie suchen, ist mit Flexbox nicht möglich, und Sie müssen ein Plugin wie http://maurismon.desandro.com/ verwenden. – snkv

Stellen Sie die gleiche Höhe Spalten

Antwort

Verwandte Themen