設置相同的高度列

圖像可以是不同的高度，但我需要與HTML/CSS使相同的高度列（圖像拉伸）。

一切工作正常，直到我不把<!DOCTYPE html>

所有其他網頁可與此DOCTYPE，所以我不能將其刪除。

如何解決我的代碼，它與我的DOCTYPE一起運行良好？

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>

來源

2016-11-28 lolalola

您是否可以使用良好的repro信息更新代碼片段？ –

如果你正在使用'<！DOCTYPE html>'，你正在使用html5。在html5中，你不需要關閉像'' – LuudJacobs

的<!DOCTYPE html>告訴本代碼是HTML5瀏覽器，所以瀏覽器正確地理解它。你所有的文件都應該有它。

請參閱此處link供進一步閱讀。

你的標記（html）有點亂，你有空的類屬性。嘗試總是保持您的代碼清潔和組織。使用類，標識符並在您的樣式表中正確引用它們。不要使用內聯樣式，除非您的特定問題需要它們。

這就是說，我建議您瞭解更多有關使用flexbox並避免將其用於未來實例的內聯使用。

你可以找到更多關於使用柔性盒here.

我做了一個Fiddle幫助您更好地理解這個概念。

來源

2016-11-28 16:36:39 snkv

這樣的自閉標籤感謝代碼，但是這個代碼只在圖像高度相同時才起作用。如果在同一列中一個圖像是40和第二個120 - 那麼你會得到底部的空白。 – lolalola

這可能是https://jsfiddle.net/qe20e5ve/1/，但列必須固定等寬，否則您將再次遇到間隙。你所追求的是Flexbox無法實現的，你將不得不使用像http://masonry.desandro.com/這樣的插件。 – snkv

設置相同的高度列

回答

相關問題