nicht angemeldet
::after und clear:both
Matthias Apsel
Gunnar BittersmannHallo,
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
.inhaltclearen.Matthias
-
So wie ich das auf die Schnelle überblicke möchtest du
.inhaltclearen.Hallo Matthias,
Nein,
.inhaltumschliesst die beiden Spalten und floatet selbst nicht. Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet dasclear: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
.inhaltclearen.
Nein,Doch. Oh!
Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das
clear:both;natürlich nicht.Dann hast du was falsch gemacht.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Dann hast du was falsch gemacht.
Offenbar:
div.inhalt:after { clear: both; }Ohne after geht's:
div.inhalt { clear: both; }Oder auch mit
div.inhalt { overflow: hidden; }da stmmen sogar die Abstände zwischen den Absätzen.
Linuchs
-
-
-
-
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'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
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'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
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'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
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: blockdas Problem lösen?Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hi,
Und inwiefern würde
display: blockdas Problem lösen?Das sollte eigentlich hier drunter: https://forum.selfhtml.org/?t=219490&m=1516190
MfG ChrisB
--
You shouldn’t do ASCII art any more … use UTF-8, goddammit!
-
-
