html和css标识元素

Question

如何使用CSS和html将图片放在带有div标签的左侧和右侧？还是有更好的方法？例如，我有：

HTML：

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

CSS：

img
{
align:left
}

这将使两个图像向左对齐。如何“识别”两个图像元素，然后将一个元素左对齐，另一个元素右对齐。两个图像相对于以java applet为中心的图像对齐。

Answer 1

你可以用"class“标签来识别。

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

.img1
{
...
}

.img2
{
 ...
}

Answer 2

您还可以通过使用:first-child psuedo选择器来减少HTML代码。

例如：

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

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

#pictures img {
  float: right;
}

这将使目标div中的第一个图像向左浮动，所有其他图像向右浮动。如果你只有一两张图片，那就太棒了，但是如果你有多张图片，你可以更容易地按照其他评论中的建议添加类。

Answer 3

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

#image_1 {
  float: left;
}

#image_2 {
  float: right;
}

注意:删除"=“前后的空格，就像"src”一样。