定位图像CSS DIV ID标签

Question

我使用div id标签在页面上放置图像，到目前为止，我有四个在页面顶部排成一排，但是当我将一个图像置于左上角，它只是在中间的图片下方。我使用了float：left和clear：left，但是这些都不起作用。我需要身份证“事实”在左上角的图像下，这是“轻”任何帮助？这是到目前为止我的代码 -

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; 
} 

和ABO解决您的问题，您必须将float设置为div而不是图像。

与你的CSS，你可以这样做：

#facts{ 
    clear:left; 
} 

Answer 2

如果你的页面是动态的，你可以试试这个代码，每五个elemnt应该来到左元

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;}