Alex: Blockelement immer so breit wie hoch!

Beitrag lesen

SELF-Forum

Blockelement immer so breit wie hoch!

Alex
– Informationen zu den Bewertungsregeln

Hallo,

ist es nur mit CSS möglich die Höhe eines Blockelementes an die Breite anzupassen?

Hintergrund:
Ich würde gerne ein Design mit _quadratischen_ Kacheln umsetzen (nur so aus Spaß für ein überschaubares Miniprojekt). Je nach Breite des Viewports sollen ein oder mehrere Kacheln nebeneinander angezeigt werden. Dies würde ich gerne mit float und %-width-Angaben sowie eine handvoll Breakpoints umsetzen. Das hätte gegenüber von festen Pixelangaben den Vorteil, dass die Container sich auf die volle zur Verfügung stehende Fläche ausbreiten können. Da die Kacheln jedoch unabhängig vom Inhalt (um überragende Inhalte kümmere ich mich noch) immer genau so hoch wie breit sein sollen, weiß ich nicht, wie ich das mit den prozentualen width-Angaben umsetzen kann.

Hier mal ein statisches Beispiel*:

<!doctype html>  
  
<html>  
	<head>  
		<meta charset="utf-8" />  
		<title>Kacheln</title>  
		<style>  
			div {  
				margin: 5px;  
				padding: 0;  
				width: 300px;  
				height: 300px;  
				background-color: red;  
				float: left;  
			}  
		</style>  
	<head>  
	<body>  
		<div>Kachel 1</div>  
		<div>Kachel 2</div>  
		<div>Kachel 3</div>  
		<div>Kachel 4</div>  
		<div>Kachel 5</div>  
		<div>Kachel 6</div>  
		<div>Bla Blub</div>  
		<div>Kachel 8</div>  
		<div>Kachel 9</div>		  
	</body>  
</html>

Hat hier jemand eine Lösung/einen Ansatz, die ohne Javascript auskommt?

FG
Alex

*Ich habe das Kachelbeispiel mal mit DIV-Containern umgesetzt auch wenn es semantisch vlt. eher eine Liste von Kacheln ist.

Beitrag melden
–
Informationen zu den Bewertungsregeln