Question

如何使用CSS和html在div标签的左右两侧放置图片？或者，还有更好的方法？比如我有：

HTML：

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

CSS：

img
{
align:left
}

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

Answer 1

您还可以使用：first-child psuedo selector。

来减少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

您可以使用“class”标签识别

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

一样

html和css识别元素

3 个答案: