9

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

img {
float: left;
}

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

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

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

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

4

4 回答 4

8

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

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

在css文件中你可以定义

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}
于 2014-12-31T09:45:21.740 回答
2

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

/* 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;
}
于 2014-12-30T07:15:44.577 回答
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">

于 2014-12-30T02:09:35.550 回答
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">

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

于 2014-12-29T23:43:08.117 回答