Doctype忽略了百分比

我在沒有使用Doctype的情況下構建了我的頁面，但是如果沒有它，我可能會得到我期待的結果。Doctype忽略了百分比

我試圖列出每行4個圖像並填充頁面，即使用戶試圖調整窗口大小。

問題是我最近添加了Doctype，而且這裏的工作不太好，圖像顯得雜亂無章。

我沒有文檔類型

enter image description here

我的網頁頁面文檔類型

enter image description here

我的jsfiddle在這裏。

http://jsfiddle.net/fk834aLa/1/

CSS：

body{ 
margin: 0 auto; 
} 

.photosquare{ 
height:25%; 
width:25%; 
float:left; 
position:relative; 
} 

.photosquare img{ 
height:100%; 
width:100%; 
float:left; 
position:relative; 
}

HTML

<body> 
<div class="first_page"> 
<div class="photosquare"> 
<img src="https://unsplash.imgix.net/photo-1428278953961-a8bc45e05f72?fit=crop&fm=jpg&h=700&q=75&w=1050" /> 
</div> 
<div class="photosquare"> 
<img src="https://unsplash.imgix.net/photo-1428278953961-a8bc45e05f72?fit=crop&fm=jpg&h=700&q=75&w=1050" /> 
</div> 
</div> 
</body>

我在做什麼錯？

謝謝。

來源

2015-07-12 Brother

所有圖片高度700像素，但其中一個是725像素，當修復它的問題解決了。 http://jsfiddle.net/fk834aLa/2/ – Gaslan

百分比高度基於父元素。儘管您的圖片photosquare確實有百分比高度，但其父母沒有確定的身高。

看看這個小提琴 - http://jsfiddle.net/drecodeam/fk834aLa/3/

html { 
    height: 100%; 
} 
body { 
    margin: 0 auto; 
    height: 100%; 
} 
.photosquare { 
    height:25%; 
    width:25%; 
    float:left; 
    position:relative; 
} 
.first_page { 
    position: relative; 
    height: 100%; 
    overflow: hidden; 
} 
.photosquare img { 
    height:100%; 
    width:100%; 
    float:left; 
    position:relative; 
}

來源

2015-07-12 20:48:46

耶，謝謝很多兄弟 – Brother

Doctype忽略了百分比

回答

相關問題