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忽略了百分比

回答

相关问题