Han Solo: clearen mit Hilfe von :after

Beitrag lesen

SELF-Forum

clearen mit Hilfe von :after

Han Solo
– Informationen zu den Bewertungsregeln

Hi,

zwei Fragen zu folgendem Quellcode:

1.) Ist diese Lösung hinsichtlich der Semantik und des Markups ideal, oder könnte ich sie noch verbessern?

2.) Die Zeilen "Bildbeschreibung Zeile 1", "Bildbeschreibung Zeile 2" und "Bildbeschreibung Zeile 3" sollen bezogen auf die Höhe des Bildes zentriert werden. Was wäre hier die eleganteste Lösung?

  
<html>  
	<head>  
		<style type="text/css">  
			* {  
  
				margin: 0px;  
  
				padding: 0px;  
  
			}		  
  
			.picWithText img {  
  
				width: 250px;  
  
				height: 320px;  
  
				float: left;  
  
			}  
  
			.picWithText:after {  
				content: ".";  
				display: block;  
				height: 0;  
				clear: both;  
				visibility: hidden;  
			}  
		</style>  
	</head>  
	<body>  
		<div class="picWithText">  
			<img src="test.jpg">  
			<p>Bildbeschreibung Zeile 1</p>  
			<p>Bildbeschreibung Zeile 2</p>  
			<p>Bildbeschreibung Zeile 3</p>  
		</div>  
  
		<h3>Diese Liste soll unter dem Foto stehen</h3>  
  
		<ul>  
			<li>Punkt 1</li>  
			<li>Punkt 2</li>  
			<li>Punkt 3</li>  
		</ul>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln