::after und clear:both
Linuchs
- css
Hallo,
ich habe - vergleichbar mit einem Zeitungsartikel - oft zwei Spalten fließend nebeneinander. Nach der rechten Spalte soll der Fluss abgeschlossen sein.
Bisher setzte ich dort <div class=clear></div> wobei clear = clear:both;
Theoretisch sollte es aber doch auch ohne HTML gehen mit ::after. Das tut aber nicht.
div.inhalt div:nth-of-type(1) {
width: 48%;
float: left;
}
div.inhalt div:nth-of-type(2) {
width: 48%;
float: right;
}
div.inhalt div:nth-of-type(2)::after {
content: " ";
clear: both;
}
<div class=inhalt>
<h3>ABCDE</h3>
<div>
<p>A long time ago / De Hoffnung <i>Halyard Sh.</i></p><p><a href="#lied_01">1</a></p>
<p>A roving maid <i>Pump, Capstan Sh.</i></p><p><a href="#lied_11">11</a></p>
</div>
<div>
<p>Alabama John Cherokee</p><p><a href="#lied_64"><b class=neu>64</b></a></p>
</div>
</div>
<div class=inhalt>
<h3>FGHIJ</h3>
<p>Fire down below</p><p><a href="#lied_32">32</a></p>
Zu erwarten wäre, dass FGHIJ in einer neuen Zeile beginnt, es steht aber unter "Alabama John Cherokee".
Was mache ich falsch?
Linuchs
Om nah hoo pez nyeetz, Linuchs!
Zu erwarten wäre, dass FGHIJ in einer neuen Zeile beginnt, es steht aber unter "Alabama John Cherokee".
Was mache ich falsch?
So wie ich das auf die Schnelle überblicke möchtest du .inhalt
clearen.
Matthias
So wie ich das auf die Schnelle überblicke möchtest du
.inhalt
clearen.
Hallo Matthias,
Nein, .inhalt
umschliesst die beiden Spalten und floatet selbst nicht. Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das clear:both;
natürlich nicht.
Habe mal für das Beispiel eine Extra-Datei gemacht, um evtl. andere Störgrößen rauszunehmen:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div.inhalt div:nth-of-type(1) {
width: 48%;
float: left;
}
div.inhalt div:nth-of-type(2) {
width: 48%;
float: right;
}
/* clear mit CSS:
div.inhalt div:nth-of-type(2)::after {
content: " ";
clear: both;
} */
/* clear mit HTML: */
.clear {
clear: both;
}
</style>
</head>
<body>
<div class=inhalt>
<h3>1. Überschrift</h3>
<div>
<p>Links 1. Absatz</p>
<p>Links 2. Absatz</p>
<p>Links 3. Absatz</p>
<p>Links 4. Absatz</p>
</div>
<div>
<p>Rechts 1. Absatz</p>
<p>Rechts 2. Absatz</p>
</div>
<p class=clear></p>
</div>
<div class=inhalt>
<h3>2. Überschrift</h3>
<div>
<p>Links 1. Absatz</p>
<p>Links 2. Absatz</p>
<p>Links 3. Absatz</p>
<p>Links 4. Absatz</p>
</div>
<div>
<p>Rechts 1. Absatz</p>
<p>Rechts 2. Absatz</p>
</div>
<p class=clear></p>
</div>
</body>
</html>
Bei der HTML-Variante sieht es wie gewünscht aus. .inhalt wird auber abgeschlossen und 2. Überschrift belegt eine neue Zeile.
Jetzt wechsle ich CSS auf
/* clear mit CSS: */
div.inhalt div:nth-of-type(2)::after {
content: " ";
clear: both;
}
/* clear mit HTML:
.clear {
clear: both;
} */
und "2. Überschrift" steht rechts neben "Links 3. Absatz", clear fruchtet also nicht. In den gefundenen Bespielen hat content: "xxx";
immer einen Wert. Aber daran liegt es aiuch nicht.
Linuchs
@@Linuchs:
nuqneH
So wie ich das auf die Schnelle überblicke möchtest du
.inhalt
clearen.
Nein,
Doch. Oh!
Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das
clear:both;
natürlich nicht.
Dann hast du was falsch gemacht.
Qapla'
Om nah hoo pez nyeetz, Linuchs!
div.inhalt div:nth-of-type(1) {
width: 48%;
float: left;
}
div.inhalt div:nth-of-type(2) {
width: 48%;
float: right;
}
Das geht auch kürzer:
~~~css
div.inhalt > div {
width: 48%;
float: right;
}
div.inhalt > div:first-of-type {
float: left;
}
Matthias
@@Linuchs:
nuqneH
Was mache ich falsch?
1. Du hast kein Online-Beispiel erstellt.
2. columns kennst du?
3. div.inhalt jeweils mit h3 beginnend sind ein Indiz dafür, dass die div lieber section wären.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
- columns kennst du?
Columns ist dafür imho nicht sonderlich gut geeignet. Das geht immer nur dann, wenn man auf die konkrete Befüllung der Spalten keinen Einfluss nehmen möchte, wie bei einem Zeitungsartikel.
Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.
Matthias
@@Matthias Apsel:
nuqneH
Columns ist dafür imho nicht sonderlich gut geeignet. Das geht immer nur dann, wenn man auf die konkrete Befüllung der Spalten keinen Einfluss nehmen möchte, wie bei einem Zeitungsartikel.
Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.
break-inside?
Ja, aber http://caniuse.com/#feat=multicolumn
Matthias
@@Matthias Apsel:
nuqneH
Ja, aber http://caniuse.com/#feat=multicolumn
Grün soweit das Auge reicht.
Qapla'
Hi,
div.inhalt div:nth-of-type(2)::after {
content: " ";
clear: both;
}
> Was mache ich falsch?
<http://www.w3.org/TR/CSS21/visuren.html#flow-control>, “Applies to:”
RTFSpecs. Nächstes mal bitte auch gerne, bevor du fragst …
MfG ChrisB
--
You shouldn’t do ASCII art any more … use UTF-8, goddammit!
@@ChrisB:
nuqneH
http://www.w3.org/TR/CSS21/visuren.html#flow-control, “Applies to:”
RTFSpecs. Nächstes mal bitte auch gerne, bevor du fragst …
Und inwiefern würde display: block
das Problem lösen?
Qapla'
Hi,
Und inwiefern würde
display: block
das Problem lösen?
Das sollte eigentlich hier drunter: https://forum.selfhtml.org/?t=219490&m=1516190
MfG ChrisB