Question

我正在使用div id标签在页面上放置图像，到目前为止，我已经在页面顶部连续排列了四个，但是当我在左上角的图像下面放置一个时，它只是而是在中间的一张照片下。我使用了float：left和clear：left但是这些似乎都没有用。我需要id“事实”在左上角的图像下面是“光”任何帮助？到目前为止这是我的代码 -

HTML

<div id="light"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo"><img src="harrypotter/photo.jpg"/></div>
<div id="facts"><img src="harrypotter/facts.jpg"/></div>

CSS

#light > img {
float:left;
height:447;
width:326;
margin-top:10px;
margin-left:8px;
margin-right:5px;
margin-bottom:5px;

}

#kiss > img {
height:252;
width:336;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;

} 

#keeper > img {
height:234;
width:333;
margin-top:10px;
margin-bottom:5px;
margin-right:5px;
float:left;
}

#photo > img {
height:301;
width:225;
margin-top:10px;
margin-bottom:5px; 
float:right;  
}

Answer 1

你的CSS可能更简单：

jsFiddle

div{
    float:left;
    margin:10px 5px 5px;
}
#light{
    margin-left:8px;
}
#photo{
    float:right;
    margin-right:0;
}
#facts{
    clear:left;
}

关于您的问题，您必须将float设置为div而不是图片。

使用CSS，你可以使用它：

#facts{
    clear:left;
}

Answer 2

如果你的页面是动态的，你可以尝试这个代码，每五分之一的元素应该低于左边的元素

HTML

<div><div id="light" class="img-class"><img src="harrypotter/harrylightening.png"/></div>
<div id="kiss"  class="img-class"><img src="harrypotter/ronkiss.png"/></div>
<div id="keeper" class="img-class"><img src="harrypotter/keeper.jpg"/></div>
<div id="photo" class="img-class"><img src="harrypotter/photo.jpg"/></div>
<div id="facts" class="img-class"><img src="harrypotter/facts.jpg"/></div></div>

CSS

.img-class {float:left;width:100px;height:100px;margin-bottom:15px;padding:0 10px;}.img-class:nth-child(5)  {clear:left;}

定位图像CSS DIV ID标签

2 个答案: