Beispiel:CSS-Ausrichtung-0.html
Aus SELFHTML-Wiki
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Elementfluss</title>
<style>
main {
max-width: 40em;
margin: 0 auto;
border: thin solid;
}
p {
background: #fdfcf3;
border: thin solid #dfac20;
border-radius: 0 0.2em 0.2em;
}
main a,
main span,
main img {
background: #e6f2f7;
border: thin solid #337599;
border-radius: 0 0.2em 0.2em;
}
img {
max-width: 15em;
vertical-align: top;
}
header {
text-align: center;
}
h1 {
font-size: 1.3em;
margin: 0.2em auto;
}
header label,
header span {
display: inline-block;
}
label {
background-color: #ddd;
border-radius: 0.5em;
padding: 0.2em 0.4em 0.2em 0.2em;
margin: 0 0 0.3em 0.3em;
user-select: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("header").addEventListener("change", function(event) {
if (event.target.name == "breite") {
document.querySelector("main").style.width = event.target.value;
}
});
})
</script>
</head>
<body>
<header>
<h1> Grundlegender Elementfluss</h1>
Breite der Anzeige:
<span><!-- Die Gruppierung mit inline-block spans bewirkt, dass die Radiogruppe
als Ganzes in eine neue Zeile umgebrochen wird -->
<label for="breite1"><input type="radio" name="breite" value="20em" id="breite1"> 20em</label>
<label for="breite2"><input type="radio" name="breite" value="26em" id="breite2"> 26em</label>
<span>
<label for="breite3"><input type="radio" name="breite" value="32em" id="breite3"> 32em</label>
<label for="breite4"><input type="radio" name="breite" value="40em" id="breite4" checked> 40em</label>
</span>
</span>
</header>
<main>
<p>Ich bin ein Textabsatz auf der Blockebene. Benachbarte <b>Block-Elemente</b> sitzen
auf neuen Linien unter mir.</p>
<p>Standardmäßig überspannen wir 100% der Breite unseres Elternelements, und wir sind
so hoch wie unser Kindinhalt. Wenn die Breite des Kindinhalts die verfügbare Breite
überschreitet, bricht der Text um und fängt auf einer neuen Zeile wieder an.</p>
<p><b>Inline-Elemente</b> wie dieser <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/display">Link</a> und dieses <span>span-Element</span>, genauso wie benachbarte Textknoten, sitzen
auf derselben Zeile sofern Platz vorhanden ist.</p>
<p>Überlaufende Inline-Elemente werden, wenn möglich, <span>umgebrochen (wie dieses hier, das Text enthält)</span>,
oder, wenn nicht, einfach in eine neue Zeile weitergereicht, ähnlich wie dieses
Bild: <img src="https://wiki.selfhtml.org/images/0/0d/SELF-logo-breit.svg" alt="Self-Logo"> </p>
</main>
</body>
</html>
