0

私のdivは単に左に浮かびません。画面の1つに垂直に並んでいます。私はそれらが互いに隣り合っていることを望んでいます。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 に答える