0

我的 div 根本不会向左浮动，它们在屏幕上垂直排列。我希望它们紧挨着。我感觉 max-width 的东西不起作用。我曾经有过这个工作，但显然不再工作了。

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

3 回答 3

2

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

你可以这样做：

<div class="coverImage coverGroup">
于 2012-07-10T23:23:46.460 回答
1

利用

<div class="coverImage coverGroup">

代替

<div class="coverImage">
于 2012-07-10T23:23:15.290 回答
0

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

于 2012-07-10T23:25:15.523 回答