0

CSSとhtmlを使ってdivタグで左右に画像を配置するにはどうすればいいですか？それとももっと良い方法がありますか？たとえば、私は持っています：

HTML:

<img src ="..." .... ... />     <!--Picture 1-->
<img src = "..." .... .... />       <!--Picture 2-->

CSS:

img
{
align:left
}

これにより、両方の画像が左に配置されます。両方の画像要素を「識別」して、一方を左に、もう一方を右に揃えるにはどうすればよいですか。両方の画像は、中央に配置された Java アプレットに対して位置合わせされています。

4

3 に答える 3

2

:first-child 擬似セレクターを使用して、HTML コードを削減することもできます。

例えば：

<div id="pictures">
    <img src="..." />     <!--Picture 1-->
    <img src="..." />     <!--Picture 2-->
</div>

#pictures img:first-child{
  float: left;
}

#pictures img {
  float: right;
}

これにより、ターゲット div の最初の画像が左にフロートし、他のすべての画像が右にフロートします。画像が 1 つまたは 2 つしかない場合は素晴らしいですが、複数ある場合は、他のコメントで推奨されているようにクラスを追加する方が簡単です。

于 2012-09-11T00:56:37.020 に答える
1

「クラス」タグで識別できます

<img src ="..." class="img1" />     <!--Picture 1-->
<img src = "..."class="img2" />       <!--Picture 2-->

.img1
{
...
}

.img2
{
 ...
}
于 2012-09-10T22:54:35.163 に答える
0 
<img src="..." id="image_1" />     <!--Picture 1-->
<img src="..." id="image_2" />     <!--Picture 2-->

#image_1 {
  float: left;
}

#image_2 {
  float: right;
}

注：「src」の場合と同様に、「=」の前後のスペースを削除してください

于 2012-09-10T23:22:03.523 に答える