Hallo,
das geht auch:
Clearing mit overflow:hidden:
wrap = <div class=„columns“>|</div>
.colums {overflow:hidden}
Nachteil: innerhalb der Container kann kein Element mehr enthalten sein,
welches rausragt, sei es mit negativem margin oder über position:absolute oder
position:relative.
Clearing mit after (macht bootstrap):
wrap = <div class=„columns“>|</div>
.columns:before,
.columns:after {
content:"";
display:table;
}
.columns:after {
clear:both;
}
.columns {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Ein Überbllick über fast alle Clearing-Arten ist hier:
http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
(743)
Gruß
Peter
> Am 19.09.2015 um 14:59 schrieb Ralf-Rene Schröder <ralf.r...@online.de>:
>
> dein Problem ist das du immer mit .columns das clearing machst, damit
> wird ein vorheriges float versäubert, aber nicht das deines letzten
> 2-spalters...
>
> entweder machst du z.B. sowas:
> wrap = <div class="columns"> | <div style="clear:both;"></div> </div>
>
> (besser natürlich mit einer Klasse)
> wrap = <div class="columns"> | <div class="clearing"></div> </div>
> .clearing {clear:both;}
>
> oder nur ein div und CSS
> wrap = <div class="columns"> | <div></div> </div>
> .columns > div:last-child {clear:both;}
>
> oder baust dir einen clearing rahmen für beliebige Elemente den du dann
> bei DDD benutzen kannst (aber sowas kann man dann ja vergessen)
>
> meine Preferenz wäre die Klassenlösung, weil man da im HTML/TS sieht
> wofür das div da ist und es nicht ausnahmsweise löscht...
> Ich persönlich nutze bei sowas immer ein
> <hr class="clear-b invisible" />
> mit dem entsprechenden CSS, so habe ich einen sichtbaren und einen
> unsichtbaren Clearer zur Verfügung...
>
>
> Am 19.09.2015 um 14:07 schrieb Alto Speckhardt:
>> Hallo,
>>
>>
>> RRS> ist ein ganz normales floatproblem von CSS
>> RRS> wenn dein linkes GE mit A höher ist als BC zusammen, dann bleibt D quasi
>> RRS> an A "hängen"...
>>
>> Ja, genau das sehe ich hier.
>>
>>
>> RRS> entweder ein clear:both für D
>> RRS> oder du baust es automatisch in dein 2-spaltiges GE mit einem
>> RRS> umfassenden Container und clearing mit ein (was wohl das sinnvollste
>> RRS> wäre)...
>>
>> Das wäre dann Sache des TypoScript, oder? Dort habe ich momentan für
>> den Zweispalter:
>>
>> ***
>> # ID des CE Backend Layout Records
>> 1 < lib.gridelements.defaultGridSetup
>> 1 {
>> columns {
>> # colPos ID
>> 1 < .default
>> 1.wrap = <div class="bel1_col1">|</div>
>> # colPos ID
>> 2 < .default
>> 2.wrap = <div class="bel1_col2">|</div>
>> }
>> wrap = <div class="columns">|</div>
>> }
>> ***
>>
>> Müsste da einfach noch ein zusätzliches "wrap" drumrum?
>>
>>
>> RRS> wie sieht denn dein HTML für den 2-spalter aus?
>>
>> Du meinst das CSS? Wie folgt:
>>
>> ***
>> /* BE-layout ID 1: zweispaltig */
>> .columns {clear:both;}
>> .columns .bel1_col1 {float:left; width:48%; margin-right:2%}
>> .columns .bel1_col2 {float:left; width:48%; }
>> ***
>>
>>
>> RRS> und nutzt du irgendein CSS Framework?
>>
>> Nein, keines.
>>
>>
>
>
> --
> image[FORMAT] - Ralf-René Schröder
> http://www.image-format.eu ... Wir geben Ihrem Image das richtige Format
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german@lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia
_______________________________________________
TYPO3-german mailing list
TYPO3-german@lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
