Question

我基本上是一篇长篇文章，其中散布着各种各样的图像。我希望第一张图片为“float：left”，第二张图片为“float：right”。我知道我可以像这样设计图像：

img {
float: left;
}

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

我也理解，我可以在html标签中设置每个图像的样式，如下所示：

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

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

Answer 1

您可以为每个图像指定一个类或ID，以帮助您为每个图像定义不同的CSS，例如

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

在css文件中你可以定义

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

Answer 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">

Answer 3

试试这个

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

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

Answer 4

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

/* 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;
}

如何使用CSS以不同方式设置多个图像的样式？

4 个答案: