Geben Sie Ihren Bildern Raum und Bildunterschriften für ein besseres Layout

Sie können Ihre Bilder immer nach einer Seite ausrichten und ihnen einen kleinen Rand geben, indem Sie ihnen einfach eine Klasse wie „floatright“ geben und diese Klasse deklarieren als

.floatright {
float: right;
margin: 5px;
}

Das ist alles schön und gut, aber lassen Sie uns die Dinge ein wenig umstellen, um mehr Kontrolle zu erhalten und den Bildern Bildunterschriften hinzuzufügen. Dies verleiht jedem Webartikel eine nette Note und ein professionelleres Layoutgefühl.

Anstatt dem Bild eine Klasse zu geben, legen Sie es in ein Div und geben Sie dem Div eine Klasse. Fügen Sie innerhalb des Div sowohl das Bild als auch die Bildunterschrift ein

<div class="rightside_image">
  <img src="egg.jpg" alt="egg" />
  <p>Stop-motion image of an<br />egg getting sliced in half.</p>
</div>

Deklarieren Sie dann diese Klasse in Ihrem CSS

div.rightside_image {
float: right;
padding: 10px;
margin: 10px;
border: 2px solid #cccccc;
text-align: center;
font-size: 0.8em;
font-style: italic;
}

Sie könnten dann diese Deklaration kopieren und ändern, um verschiedene Variationen zu erstellen, wie z. B. ein nach links verschobenes Bild, zentrierte Bilder, unterschiedliche Hintergrundfarben usw.

[LIVE-BEISPIEL]

[BEISPIEL HERUNTERLADEN]