7

画像を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

4

5 に答える 5

9

これを実現するために、 cssプロパティdisplay：inline-blockまたはfloat：leftを使用することもできます。

HTMLコード

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

CSSコード

div img{ display: inline-block;}

また

div img{ display: block;float: left;margin-right: 5px;}
于 2012-07-03T10:57:01.280 に答える
4

あなたのコードがこのようなものであるという一般的な仮定について

<div>
    <img ... />
    <img ... />
    <img ... />
</div>

次に、単純なCSSプロパティで作業を完了します。

div img { display: inline; }

HTML部分を見て。次のCSSを使用して、それらをオンラインにすることができます。

.partners img { display: inline; }
于 2012-07-03T10:48:39.987 に答える
1

inline要素に付属する多くのコントロールを奪うを使用しblockたり、要素の垂直方向の配置を変更したりするのではなく、要素をフロートさせます。

<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にも影響します。 はブラウザ間で一貫性がなく、私が間違っていなければ、実際に探している結果が得られるはずはありません。marginspaddingvertical-align

于 2012-07-03T10:55:03.183 に答える
0

今、あなたはすることができます

デフォルトのリンクはhttp://tinkerbin.com/ob9HFOA4です。

Css

   img{
   display: inline-block;
    vertical-align: top;
    }

ライブデモhttp://tinkerbin.com/a5BxIZrs

于 2012-07-03T10:47:59.403 に答える
0

何よりもまず、追加する可能性のある他の画像を台無しにしないために、次のようにします。

.Wrapper img{ float: left; }

これにより、左側の.Wrapperクラス内のすべての画像がフロートします。これらのcssルールが呼び出されるページ内のすべての画像が左揃えになる場合は、次のようにします。

.Wrapper img{ float: left; }

編集：このルールを.Wrapperに追加します

.Wrapper{ width: 100%; }
于 2012-07-03T18:49:19.927 に答える