2

私は単純なページを作成しようとしています:中央に配置された 2 つのサムネイル画像。それぞれが元の画像にリンクしています。これがコードです（わかりやすくするために一部を削除しました）：


<!DOCTYPE html>
<html>
  <head>
    <style>
      .column1, .column2 {
      width:50%;
      float:left;
      }

      div img {
      display:block;
      margin:20px auto;
      width:300px;
      }
    </style>
  </head>
  <body>
    <div class="column1">
      <a href="#">
        <img src="maelstrom_mini.jpg" />
      </a>
    </div>
    <div class="column2">
      <a href="#">
        <img src="maelstrom_mini.jpg" />
      </a>
    </div>
  </body>
</html>

問題は非常に微妙です。各画像の幅はわずか 300 ピクセルですが、アンカー ボックスは、含まれているはずの画像よりも幅が広くなっています。画像をその表面上で「クリック可能」にします。アンカーがすべての列に広がらないように指示する方法がわかりません。

スタイルシートで属性を削除すると、display:blockその問題は解決しますが、含まれている列に関して写真が中央に配置されなくなりました。

両方の正しいプレゼンテーションを行うための正しい解決策は何ですか?

4

3 に答える 3

2

問題を解決しました。

a および img タグの周りにラッピング div を追加し、その幅を 300px に設定してから、画像の幅を 100% に設定します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .column1, .column2 {
      width:49%;
      float:left;
      border: 1px solid red;
      }

      div img {
      width:100%;
      }

      #img-wrap{

      width:300px;
       margin:20px auto;
      display: block;
      }


    </style>
  </head>
  <body>
    <div class="column1">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
      </div>
    </div>
    <div class="column2">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
        </div>
    </div>
  </body>
</html>

ここで動作することがわかります> http://jsfiddle.net/3se2V/3/

于 2013-01-11T21:33:44.660 に答える
0

問題は画像にあると思いますmargin:20px auto;：

これを変える：

div img {
    display:block;
    margin:20px auto;
    width:300px;
}

これに：

div { margin: 20px 0; }

div img {
    display:block;
    margin:0 auto;
    width:300px;
}
于 2013-01-11T20:52:33.440 に答える
0

問題を再現できるのは、display:blockすべてのa要素に追加する場合だけです。したがって、これをcssに追加することをお勧めします：

div a {
  display:inline;
}

それはあなたの問題を解決するかもしれません。

于 2013-01-11T21:27:46.947 に答える