33

自分のケースに関する特定の情報を見つけるのに苦労しています。残りのコンテンツと並べるために、940 ピクセルの div に 3 つの画像サムネイルを配布したいと考えています。これまでのところ、画像を水平に並べることができましたが、間隔がずれていて、すべてが左にずれています。

ここに私のCSSがあります:

#thumbs {   
  width: 940px;
  margin-top:90px;
  margin-left: auto; 
  margin-right: auto;
}

私のHTML：

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

サンプル画像

私が現在持っているもの：

ここに画像の説明を入力

私が達成しようとしていること：

ここに画像の説明を入力

あなたの助けに感謝します。

4

6 に答える 6

47

ここでの私の回答に示されている手法を使用してください:等間隔の DIV を使用した流体幅

これがあなたのコードです：http://jsfiddle.net/thirtydot/JTcGZ/

CSS:

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

HTML:

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>​
于 2012-05-12T18:43:13.657 に答える
30

きれいな解決策があります：

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}
于 2014-04-01T07:38:08.917 に答える
3

追加してみる

位置:相対; テキスト揃え:中央;

#thumbs で、#thumbs 内の (または img) の幅と余白を設定します。

このようなもので、さまざまな値をテストします。

#thumbs a {
  width: 25%;
  margin: 0 4%;
  text-align:center;
}
于 2012-05-12T18:46:05.940 に答える
1

折り返しの id div サムが 90px の上部パディングを持つコンテナーとして使用されず、他の内部要素が単純なクラス (id ではないため再利用できる) を使用しないのはなぜでしょうか。そうすれば、それらは水平方向に完全に整列し、ラッピング コンテナーは、探しているマージンを提供します。また、目的を達成するために使用するコードが大幅に少なくなります。

于 2012-05-12T18:54:52.070 に答える