1

私は常に Web 開発を行っているわけではありませんが、CSS を行うとき、私が想像できる中で最も苛立たしいことです。画像と説明を一緒に保持する単純なクラスを作成しようとしています。それぞれ 3 つの画像を含む 2 つの行が必要です。とてもシンプルです。

画像のみを表示するための私のコードは次のとおりです。これは正常に機能します。

img {
  position: relative;
  margin: 0 auto;
  max-width: 650px;
  padding: 5px;
  margin: 10px 0 5px 0;
  border: 1px solid #ccc;  
}

<h3>Screenshots</h3>

<p>
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a>
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a>
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a>
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a>
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a>
</p>


<h3>Installation</h3>

これは、私が望むとおりに画像を表示します。各行に 3 つずつ、次に < p > からのパディング、次にインストールセクションがあります。同じ div 内の画像の下に説明を表示するために、css の img を div.img に変更し、htm コードを次のように変更しました。

<h3>Screenshots</h3>

<p>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
  <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>

<h3>Installation</h3>

結果として得られる Web ページは、最初のケースでは img とまったく同じになり、2 番目のケースでは div.img が同じ属性を持つと考える人もいるでしょう。しかし、そうではありません。このコードを使用すると、各 div が列の幅いっぱいに引き伸ばされ、画像が div の左側に上下に配置されます。

私もこのコードを試しました: http://www.w3schools.com/CSS/css_image_gallery.asp、しかしこの場合、私はインストールを取得し、それに続くすべてのテキストは画像に移動し、下のマージンを持つ < p > タグを無視します.

4

1 に答える 1

2

シンプルにするために、div を<span>要素に置き換えるかdisplay: inline、CSS で div を設定します。これにより、期待どおりに動作します（ブロック要素ではなくinlineとして）。

また：

  • は必要ありませんmargin: 0 auto。ブロック要素のようにインライン要素を中央に配置しません
  • を追加しましposition: relativeたが、それも必要ないようです。absolute後で div 内の何かに位置を適用するつもりがない限り。

これら 2 つのプロパティがなく、div に追加されている jsfiddle を次に示しますdisplay: inline: http://jsfiddle.net/3BwKY/。

于 2012-07-24T16:49:44.680 に答える