it-swarm.com.de

Wie kann ich mit CSS mehrere Bilder unterschiedlich formatieren?

Im Grunde gestalte ich einen langen Aufsatz mit verschiedenen Bildern, die überall verstreut sind. Ich möchte, dass das erste Bild "float: left" und das zweite "float: right" lautet. Ich weiß, dass ich die Bilder so stylen kann:

img {
float: left;
}

Dadurch hat jedes Bild den gleichen Stil. Wie gestalte ich jedes Bild anders? Ich habe versucht, jedes Bild einer anderen div-Klasse zuzuordnen, damit ich es anders stylen kann, aber es hat nicht funktioniert.

Ich verstehe auch, dass ich jedes Bild im HTML-Tag so stylen könnte:

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

Ich höre immer wieder, dass es am besten ist, den Stil im externen Stylesheet (CSS) getrennt vom HTML-Code beizubehalten. Ist dies ein Fall, in dem Inline-Styling erforderlich ist?

6
cphil

Sie können jedem Bild eine Klasse oder ID zuweisen, mit der Sie unterschiedliche CSS für jedes Bild definieren können

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

in CSS-Datei können Sie definieren 

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

Geben Sie Ihrem Bild eine Klasse, und Sie können alle Bilder mit dieser Klasse wie folgt gestalten:

.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

Alle oben genannten sind in Ordnung, ich würde nur vorschlagen, die allgemeinen Bildeinstellungen in diesem Fall so zu gruppieren, dass die linke/rechte Klasse nur das enthält, was anders ist.

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

Versuche dies  

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

Dies wird zwei Bilder in einem linken und eines in einem rechten Bereich verschieben

0
sanoj lawrence