3枚の画像を同じ行に等間隔で並べる？

1枚目の画像はページの左側に、3枚目の画像はページの右側に、2枚目の画像は1枚目と3枚目の画像のちょうど真ん中に配置したいのです。

2番目の画像が他の2つの画像の中央に正確に配置された3つの画像を揃えるにはどうしたらよいでしょうか？

 <div>
 <img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
 <div id="content" align="center"> 
 <img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
 </div>
 <img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
 </div>

 <style type="text/css">
 #content {

 width:50%;
 margin-left: auto ;
 margin-right:auto ;

 }
プログラミング
html css
2日 7月 2013 в 7:32
3 ビュー

最新のアプローチ:フレックスボックス。 -。 次のCSSをコンテナ要素(ここでは「div」)に追加するだけです。

div {
  display: flex;
  justify-content: space-between;
}

。

div {
  display: flex;
  justify-content: space-between;
}
<div>



</div>

。

古い方法(古代のブラウザの場合-flexboxの前)。 -。 コンテナ要素で「text-align:asjustice;」を使用します。

次に、コンテンツを100%幅に伸ばします。

マークアップ。 ---。

<div>



</div>

CSS。 ---。

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

。

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}
<div>



</div>

。

Danield
編集した答え 23日 1月 2019 в 2:25
解説 (1)

  • オプション1：

  • divの中に画像を入れるのではなく、spanの中に1枚ずつ入れる。

  • 1枚目と2枚目の画像を左寄せにする。

  • 2枚目の画像に左パディングを施す。

  • 右側の画像を右側に寄せる。

画像でフロートを使用すると副作用があるため、すべての画像の親である

(ある場合) に overflow:hidden を追加することを常に覚えておいてください。

  • オプション2（優先）です：

    • すべての画像をborder="0"のテーブル内に配置します。
    • テーブルの幅を100%にする。

これは、テーブルの正確な幅を気にすることなく、2枚目の画像を常に中央に揃えるための最良の方法となります。

下のようなものです：

<table width="100%" border="0">
  <tr>    
  <td></td>
  <td></td>
  <td></td>
  </tr>
</table>
Jan Doggen
編集した答え 2日 7月 2013 в 9:29
解説 (2)

これがあなたの答えになるはずです

<div align="center">


 <div id="content" align="center"> 

 </div>
 </div>
解説 (1)

HTML:

<div class="container">
    <span>

    </span>
    <span>

    </span>
    <span>

    </span>
</div>

CSS:

.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%;  }

私はこれをテストしていませんが、これがうまくいくことを願っています。

.containerスパンに「display:inline-block」を追加して、スパンを30%の幅に固定することができます。

Gokul Gopala Krishnan
編集した答え 2日 7月 2013 в 11:06
解説 (2)

最初のDIVは#contentと仮定しました：

<div id="content">



</div>

そして、CSS ：

#content{
         width: 700px;
         display: block;
         height: auto;
     }
     #content > img{
        float: left; width: 200px;
        height: 200px;
        margin: 5px 8px;
     }
解説 (0)