html - html和css标识元素

Question

怎么用css和html在左右两边放置一个带有div标签的图片？或者，还有更好的方法？例如我有：

HTML：

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

CSS：

img
{
align:left
}

这将使两个图像都向左对齐。如何“识别”两个图像元素，然后将一个左对齐，另一个右对齐。两个图像都相对于居中的 Java 小程序对齐。

Answer 1

您还可以使用 :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 中的第一个图像向左浮动，而其他所有图像都向右浮动。如果您只有一两张图片，那就太好了，但如果您有多张图片，则按照其他评论中的建议添加类可能会更容易。

Answer 2

你可以用“类”标签来识别

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

.img1
{
...
}

.img2
{
 ...
}

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”一样