html和css識別元素

Question

如何使用CSS和html將圖片放在左側和右側的div標籤中？或者，還有更好的方法？比如我有：

HTML：

CSS：

img 
{ 
align:left 
} 

這將兩個圖像對齊到左邊。我怎樣才能「識別」兩個圖像元素，然後對齊左邊和右邊。兩個圖像都相對於一個居中java小程序對齊。

Answer 1

你可以用「類」標籤

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

.img1 
{ 
... 
} 

.img2 
{ 
... 
} 

Answer 2

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

#image_1 { 
    float: left; 
} 

#image_2 { 
    float: right; 
} 

注意識別：之前和「=」後刪除空間，如你有「SRC」

Answer 3

你也可以減少你HTML代碼通過使用：first-child psuedo選擇器。

例如：

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

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

#pictures img { 
    float: right; 
} 

這將使你的目標DIV浮動第一圖像左，和所有其它的權利。如果你只有一個或兩個圖像，但是如果你有多個圖像，那麼只需按照其他評論中的建議添加類就可以更容易。