nicht angemeldet
na schön, hab mal hier etwas gespielt, aber der rechten Rand bleibt verschieden von den anderen Abstänen, egal wie breit man das Fenster macht. Die Abstandbreite mußte ich experimentell auf 0.5% herunternehmen damit es stimmte, obwoht (100 - 4*23)/5 = 1.6 wäre.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Raster-Layout display:table-cell</title>
<style>
body {
margin: 0 auto;
}
div.table {
display: table;
width: 100%;
}
div.spalte {
display: table-cell;
border: thin solid red;
width: 23%;
}
div.dist{display: table-cell; width:2%;}
</style>
</head>
<body>
<h1>Raster-Layout display:table-cell</h1>
<main>
<div class="table">
<div class="dist"> </div>
<div class="spalte">Ich bin eine Spalte.</div>
<div class="dist"> </div>
<div class="spalte">Ich bin eine zweite Spalte.</div>
<div class="dist"> </div>
<div class="spalte">Ich bin eine dritte Spalte mit noch mehr Inhalt.</div>
<div class="dist"> </div>
<div class="spalte">Ich bin eine vierte Spalte.
<br>
<br>
Ein Vorteil von display:table ist, dass sich dass Layout der Spalten automatisch an die Höhe der Spalten anpasst.
</div>
</div>
</main>
</body>
</html>
Die Frage für morgen ist dann, ob man in solche Kästchen statt reienm Text dann auch Tabellen packen kann, die scrollen wenn das Kästchen zu eng wird.
Gunnar Bittersmann
Julius
JürgenB
Rolf B
Matthias Apsel
marctrix