如何使用 CSS 为多个图像设置不同的样式？答案

【问题标题】：How can I use CSS to style multiple images differently?如何使用 CSS 为多个图像设置不同的样式？
【发布时间】：2015-02-26 03:38:28
【问题描述】：

我基本上是在设计一篇长篇文章，其中散布着各种图像。我希望第一张图片“浮动：左”，第二张图片“浮动：右”。我知道我可以像这样设置图像样式：

img {
float: left;
}

这使得每张图片都具有相同的风格。如何以不同的方式设置每个图像的样式？我尝试将每个图像放在不同的 div 类中，以便我可以对它们进行不同的样式设置，但它不起作用。

我也明白，我可以在 html 标记中设置每个图像的样式，如下所示：

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px">

我一直听说最好将样式保留在外部样式表 (CSS) 中，与 html 分开。这是需要内联样式的情况吗？

【问题讨论】：

似乎你走在了正确的轨道上——将类放在包含图像的 div 上是什么“没有用”？你能告诉我们你做了什么以及发生了什么吗？顺便说一句，使用 img 标签上的 height 属性指定高度不再是首选方法；请改用height CSS 属性。与align 相同。
@torazaburo 我把“class=__”放在了错误的地方，但这里的所有答案都为我清除了。感谢您确认html标签中有关height属性的信息，我感觉不对。

标签： html css image css-float inline-styles

【解决方案1】：

试试这个

img{width: 200px;height:200px;background-color: antiquewhite}
.left{float:left}
.right{float:right}


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left">
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right">

这将浮动两个图像，一个在左边，另一个在右边

【讨论】：

【解决方案2】：

给你的图片一个类，然后你可以用这个类为所有图片设置样式，如下所示：

.left {
  border: solid 5px red;
  float: left;
}

.right {
  border: solid 5px blue;
  float: right;
}

<img src="ABCD.png" class="left">
<img src="ABCD.png" class="right">

【讨论】：

【解决方案3】：

以上都很好，我只建议在这种情况下将图片的常用设置分组，以便左/右类只包含不同的内容。

/* Group the common attributesso that you only need to set it once */
.picture, .leftPicture, .rightPicture {
    border: 2px dotted gray;
    width: 200px;
}

.leftPicture {
    float:left;
}

.rightPicture {
    float:right;
}

【讨论】：

如何在 html 标签中对它们进行分组？我知道如何像这样放置一个类：我不知道如何将“.Picture”类合并到 html 中。
您只能使用 .leftPicture，我包括 .picture 作为不需要对齐的普通图像的示例。 HTML ..class="leftPicture".. 我在 CSS 中进行了分组。您可以在 HTML 中执行此操作（删除 .picture 旁边对 leftPicture 和 rightPicture 的引用，然后将 CSS ..class="image leftPicture".. 中的两个类分配给相同的效果。

【解决方案4】：

您可以为每个图像指定一个类或 id，这将帮助您为每个图像定义不同的 css，例如

<img src="" class="image1">
<img src="" class="image2">

在css文件中可以定义

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}

【讨论】：