Alex: Blockelement immer so breit wie hoch!

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

  1. Blockelement immer so breit wie hoch!

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Alex:

    nuqneH

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

    Ja.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Blockelement immer so breit wie hoch!

      Alex
      – Informationen zu den Bewertungsregeln

      Hallo Gunnar,

      vielen Dank für deine Antwort. Hat zwar etwas gedauert, bis ich das Beispiel auch verstanden habe, aber letztlich ist bei mir dank w3.org dann auch der Groschen gefallen:

      "Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block."

      Dies dann wie in der Lösung für ein quadratisches Element zu nutzen ... da muss man erstmal drauf kommen.

      FG
      Alex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln