html和css标识元素答案

【问题标题】：html and css identifying elementshtml和css标识元素
【发布时间】：2012-09-10 22:52:09
【问题描述】：

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

HTML：

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

CSS：

img
{
align:left
}

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

【问题讨论】：

align:left 不是 CSS。也许你想要float:left，或者text-align:left给父母

标签： html css image identify

【解决方案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 中的第一个图像向左浮动，而其他所有图像向右浮动。如果您只有一两张图片，那就太好了，但如果您有多张图片，则按照其他 cmets 中的建议添加类可能会更容易。

【讨论】：

【解决方案2】：

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

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

.img1
{
...
}

.img2
{
 ...
}

【讨论】：

【解决方案3】：

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

#image_1 {
  float: left;
}

#image_2 {
  float: right;
}

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

【讨论】：

此规则将不适用。 .（点）是一个类选择器，你已经分配了 id。