Question

我的div只是不会向左浮动，它们在屏幕上垂直排列。我希望他们紧挨着彼此。我感觉最大宽度的东西不起作用。我有一点工作，但显然不是。

<!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>

Answer 1

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

你可以这样做：

<div class="coverImage coverGroup">

Answer 2

使用

<div class="coverImage coverGroup">

而不是

<div class="coverImage">

Answer 3

您已将样式应用于.coverGroup类，但该类未在代码中的任何位置使用。如果将.coverGroup重命名为.coverImage将起作用。

HTML，div不会左移

3 个答案: