2012-07-10 2 views
0

Мои divs просто не плавают влево, они выравниваются вертикально по экрану. Я хочу, чтобы они были рядом друг с другом. У меня такое ощущение, что материал максимальной ширины не работает. У меня это работало в какой-то момент, но уже не было видно.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

Где вы используете класс .coverGroup в HTML ????? – domoindal

ответ

1

Использование

<div class="coverImage coverGroup"> 

вместо

<div class="coverImage"> 
2

Вы забыли, используя правильный класс для дивы. Класс coverGroup имеет плавающий атрибут, но вы используете coverImage.

Вы могли бы сделать это нравится:

<div class="coverImage coverGroup"> 
0

У вас есть стили, применяемые к классу .coverGroup, но этот класс не используется в коде. Если вы переименуете .coverGroup в .coverImage, который будет работать.

Смежные вопросы