web-dev-qa-db-fra.com

Comment utiliser CSS pour styler plusieurs images différemment?

Je suis en train d’élaborer un long essai avec diverses images dispersées. Je voudrais que la première image "float: left" et la seconde "float: right". Je sais que je peux styliser les images comme ceci:

img {
float: left;
}

Cela donne à chaque image le même style. Comment styliser chaque image différemment? J'ai essayé de mettre chaque image dans une classe div différente, afin de pouvoir les styler différemment, mais cela n'a pas fonctionné.

Je comprends aussi que je pourrais styler chaque image de la balise HTML, comme ceci:

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

Je continue à entendre qu'il est préférable de conserver le style dans la feuille de style externe (CSS), séparée du code HTML. Est-ce un cas où un style en ligne est nécessaire?

htmlcssimagecss-floatinline-styles
6
cphil

Vous pouvez attribuer à chaque image une classe ou un identifiant qui vous aidera à définir différents CSS pour chaque image, comme

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

dans le fichier css vous pouvez définir 

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

Donnez à votre image une classe et vous pourrez ensuite styler toutes les images avec cette classe comme ceci:

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

1
Bill

Tout ce qui précède va bien, je suggérerais seulement de regrouper les paramètres d'image courants dans ce cas afin que les classes gauche/droite ne contiennent que ce qui est différent.

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

Essaye ça  

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

ceci fera flotter deux images l'une à gauche et l'autre à droite

0
sanoj lawrence