私は、画像をdiv内で横に並べて表示する必要があります。どうやってやるの？<img>タグをdiv内で横に並べるには？
HTML：
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
参考：jsFiddle
また表示のCSSプロパティを使用することができます。インラインブロックまたはフロート：これを達成するためにを残しました。
HTMLコード
<div>
<img ... />
<img ... />
<img ... />
</div>
CSSコード
div img{ display: inline-block;}
または
div img{ display: block;float: left;margin-right: 5px;}
今、あなたはあなたのデフォルトのリンクがhttp://tinkerbin.com/ob9HFOA4
ある
に使用することができますCSSそして、この
<div>
<img ... />
<img ... />
<img ... />
</div>
のようなあなたのコードであること何かの一般的な仮定に
img{
display: inline-block;
vertical-align: top;
}
これは何でしょうか？ – Starx
私はあなたがこれをする必要があると思うhttp://tinkerbin.com/pakIgNQQ –
、シンプルなCSSプロパティは仕事を得るでしょう。あなたのHTML部分を見に
div img { display: inline; }
。以下のCSSを使ってオンラインにすることができます。
.partners img { display: inline; }
よりもむしろblock要素、またはその垂直方向の位置合わせを変更するに付属しているコントロールの多くのあなたを奪うinlineを使用して、私はそれらをフロートしたい：
<html>
<head>
<style>
div.img_holder img
{
float: left;
}
</style>
</head>
<body>
<div class = "img_holder">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
フローティング特有のものですCSSで独自の科学;それは非常に強力な結果をもたらすことができるので、学習する価値があります。たとえば、divsで、画像ではありませんでした。inlineを使用すると、身長を設定できなくなります。 Inlineは、marginsとpaddingの動作にも影響します。 vertical-alignはブラウザ間で矛盾しています。私が間違っていないと、実際には探している結果が得られないはずです。
私は浮動小数点数のプロパティを使用し、水平に並べられた2枚の写真....任意の提案がありますか？ – justcode
浮動小数点数は、親のサイズが十分でない場合にラップするという点で、インライン要素のように少し動作します。親の幅（私の例では 'img_holder'）を適切に設定すると助けになるはずです。そうでない場合は、スクリーンショットを提供できますか？あなたの画像はそれぞれ95ピクセル幅です（上記によると）、余白やパディングもありますか？ –
Firtsは、ありません台無しにあなたの他の画像をするためには、おそらく追加するつもりですこれを行う：
.Wrapper img{ float: left; }
これは、.Wrapperクラス内のすべての画像を左側に浮動させます。これらのCSSルールが呼び出されるページ内のすべての画像は、左に整列された場合は、この操作を行います。
.Wrapper img{ float: left; }
EDIT：
.Wrapper{ width: 100%; }
私はfloatプロパティを使用しましたが、写真の2つだけが水平に整列します... – justcode
は私たちのHTMLを表示.Wrapperするために、このルールを追加しますどのようにこのIMGを調整していますか？ – Starx
より多くの情報を提供することから始めてください... HTML、おそらくjsfiddle.netは、あなたがすでに試したことのアイデアを与えるために – freefaller
あなたのコードのhtml部分を更新して、他の方がよりよく答えるようにします。 – Starx