Question

我在没有使用Doctype的情况下构建了我的页面，但是如果没有它，我可以得到我期待的结果。

我正在尝试每行列出4张图片，即使用户试图调整窗口大小，也要填充页面。

问题在于我最近添加了Doctype，而且这里的内容效果不佳，图片显得杂乱无章。

我没有Doctype的页面

enter image description here

我的带有Doctype的页面

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>

我做错了什么？

感谢。

Answer 1

高度百分比基于父元素。虽然你的图像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;
}

Doctype忽略了百分比

1 个答案: