3

div の同じ行に 3 つの画像を配置したい場合、1 番目の画像はページの完全な左側に配置する必要があり、3 番目の画像はページの右側に完全に配置する必要があり、2 番目の画像は 1 番目の画像の正確な中央に配置する必要があります。 3枚目の画像

以下のコードを試してみましたが、私が望むように表示されています.3つの画像を他の2つの画像の正確に中央に配置された2番目の画像に合わせる方法は?

 <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 ;


 }
4

5 に答える 5

5

最新のアプローチ: フレックスボックス

次の CSS をコンテナ要素 (ここではdiv) に追加するだけです。

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


div {
  display: flex;
  justify-content: space-between;
}
<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

古い方法 (古いブラウザの場合 - フレックスボックス以前)

text-align: justify;コンテナ要素で使用します。

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

マークアップ

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</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>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

于 2013-07-02T09:29:49.697 に答える
2

HTML:

<div class="container">
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
</div>

CSS:

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

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

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

于 2013-07-02T11:01:38.513 に答える
2

  • オプション1：

    • 画像を div 内に配置する代わりに、各画像をスパン内に配置します。
    • 1 番目と 2 番目の画像を左にフロートします。
    • 2 番目の画像に左パディングを与えます。
    • 右の画像を右に浮かせます。

overflow:hidden画像でフロートを使用すると副作用があるため、常にすべての画像の親 (存在する場合)に追加することを忘れないでください。

  • オプション 2 (推奨):

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

これは、テーブルの正確な幅を気にせずに、2 番目の画像が常に中央に配置されるようにするための最良の方法です。

以下のようなもの：

<table width="100%" border="0">
  <tr>    
  <td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
  <td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
  <td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
  </tr>
</table>
于 2013-07-02T09:08:19.370 に答える