2012-07-10 110 views
0

我的div不会左浮动,它们垂直排列屏幕。我希望他们彼此相邻。我有一种感觉,最大宽度的东西不起作用。我曾经有过这样的工作,但显然不再是这样。HTML,divs不会左浮动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TV Shows</title> 

<style type="text/css"> 
    .coverGroup { 
    display: block; 
    max-width: 297px; 
    height: 179px; 
    float: left; 
    overflow: hidden; 
    } 
    .coverImage img { 
    border:5px solid #ddd; 
    } 
    .coverImage:hover img { 
    border: 5px solid #555; 
    } 
</style> 

</head> 
<body> 

<span style="font-size:20px;">Click on the show of your choice</span> 
<br /> 

<div class="coverImage"> 
    <a href="/1/american-dad!" title="American Dad!"> 
     <img height="179" width="287" src="/1/wp-content/uploads/2012/07/Episodes1.png"/> 
    </a> 
</div> 

<div class="coverImage"> 
    <a href="/1/family-guy" title="Family Guy"> 
    <img height="179" width="287" src="/1/wp-content/uploads/2012/07/500px-Family_Guy_Logo.svg1_-300x179.png"/> 
    </a> 
</div> 

</body> 
</html> 
+3

你在哪里使用HTML中的.coverGroup ?????? – domoindal 2012-07-10 23:19:57

回答

1

使用

<div class="coverImage coverGroup"> 

,而不是

<div class="coverImage"> 
2

你忘了使用正确的类的div。 类coverGroup具有浮动属性,但您使用coverImage。

你可以做到这一点,如:

<div class="coverImage coverGroup"> 
0

您已经应用到.coverGroup类的样式,但该类未在代码的任何地方使用。如果您将.coverGroup重命名为.coverImage,那将起作用。