|
|||
Zeilenumbruch bei horizontal nebeneinanderliegenden divs
Hallo!
Ich habe einige div-Container mit float:left horizontal in einer Reihe liegen. Ist es möglich, nach jedem x-ten div-Container eine Art Zeilenumbruch einzufügen? Oder muß ich das ganze dann anders als mit float:left lösen? Für'n kleinen Tip wär ich sehr dankbar! Gruß, Graf Zahl |
Sponsored Links |
|
|||
Zitat:
Wenn ich Dich nun richtig verstanden habe - willst Du nur eine betimmte Anzahl Elemente 'floaten' lassen. Möglichkeiten 1. Einen übergeordenten Container der die max. Breite bestimmt. 2. Einen [clear: left;] entsprechend einfügen hier ein kompiniertes Beispiel, wobei die max. Breite des übergeordenten Containers vom BODY, mit entsprechender Fensterbreite - also variabel, darstellt wird. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html,body { padding: 0px; margin: 0px; font-family: "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; background-color: #FF9911; color: #000000; } div { float: left; width: 100px; margin: 5px; border: 1px solid #000000; padding: 2px 5px; background-color: #FFFFFF; font-size: 0.8em; } br.clear { clear: both; line-height: 0em; height: 0px; } --> </style> </head> <body> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div><br class="clear" /> <div>[float: left;]</div><br class="clear" /> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> <div>[float: left;]</div> </body></html>
__________________
</ulle> |
Sponsored Links |
|
||||
Teste aber sehr, sehr sorgfältig! Außer in sehr guten Browsern (Opera und Safari) ist »clear« überall ziemlich kaputt.
Eine Übersicht findest du hier: http://www.pixelsurge.com/experiment/clearers.htm Traurig eigentlich, das ist CSS 1... |
|
|||
Warum und wie ist clear kaputt, toscho?
Würde mich mal interessieren. Außer, dass bei bestimmten Konstellationen der IE dann gelegentlich nix mehr anzeigt (Peek-a-Boo oder Guillotine-Bug, s. hier: http://www.fabrice-pascal.de/bugbase/guillotine2/ ), hab ich sonst noch nix an Bug bemerkt (o.k. - der o.g. Bug ist schon recht heftig!). Würde mich freuen, wenn Du das nochmal erklären könntest oder einen funktionierenden Link posten würdest. |
|
|||
Ich habe diesen CODE aus diesem Link noch, könnte diesen posten
Bewertung von mir WICHTIG, erklären schwierig, sind einige Beispiele. Verlinken kann/will ich nicht, hätte kein Onlinesystem zur Verfügung, aber wenn hemfrie zusagt, dann gibts hier 593 Zeilen zum kopieren.
__________________
</ulle> |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- html,body { margin: 2em; padding: 0; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; background-color: #FFEE99; color: #000000; } h3 { margin: 0; } .container { margin: 20px 50px; background: #ccc; /* width: 700px; /* this helps IE */ /* border-bottom: 1px solid blue; /* this will make all scenarios work in Gecko */ /* padding: 10px; /* this will also make all scenarios work in Gecko */ } .float { float: left; width: 200px; height: 100px; margin: 0; background: #f00; } .clearA { overflow: hidden; /* helps WinIE5 */ clear:both; height:0; margin:0; /* I think this is unnecessary */ font-size: 1px; line-height: 0; /* helps WinIE5.5 with A2 */ } .clearB { clear:both; height:0; margin:0; /* I think this is unnecessary */ font-size: 1px; /* helps WinIE with B1 and B2 */ line-height: 0; /* helps WinIE5 */ } .clearC { overflow: hidden; /* helps IE6, but is unnecessary if container has dimension */ clear:both; height:1px; /* helps Gecko */ margin:-1px 0 0 0; font-size: 1px; } th { text-align: left; } td { text-align: center; color: #fff; } td.yes { background: green; } td.no { background: red; } td.partial { background: orange; } --> </style> </head> <body> <h1>Clearing methods</h1> <h2>A. Clearing element CSS for the following test cases:</h2> <pre>.clearA { overflow: hidden; clear:both; height:0; margin:0; font-size: 1px; line-height: 0; } </pre> <div class="container"> <h3>1. Div with nothing inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearA"></div> </div> <div class="container"> <h3>2. Div with nbsp inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearA"></div> </div> <div class="container"> <h3>3. Div with comment inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearA"></div> </div> <div class="container"> <h3>4. br</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <br class="clearA" /> </div> <h2>B. Clearing element CSS for the following test cases:</h2> <pre>.clearB { clear:both; height:0; margin:0; font-size: 1px; line-height: 0; } </pre> <div class="container"> <h3>1. Div with nothing inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearB"></div> </div> <div class="container"> <h3>2. Div with nbsp inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearB"></div> </div> <div class="container"> <h3>3. Div with comment inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearB"></div> </div> <div class="container"> <h3>4. br</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <br class="clearB" /> </div> <h2>C. Clearing element CSS for the following test cases:</h2> <pre>.clearC { overflow: hidden; clear: both; height: 1px; margin: -1px 0 0 0; font-size: 1px; }</pre> <div class="container"> <h3>1. Div with nothing inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearC"></div> </div> <div class="container"> <h3>2. Div with nbsp inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearC"></div> </div> <div class="container"> <h3>3. Div with comment inside</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <div class="clearC"></div> </div> <div class="container"> <h3>4. br</h3> <div class="float">This is the float. It should be surrounded completely by gray, but no gray should show beneath it.</div> <br class="clearC" /> </div> <table border="1"> <caption> Browser Results </caption> <tr> <th scope="col">Browser</th> <th scope="col">A1</th> <th scope="col">A2</th> <th scope="col">A3</th> <th scope="col">A4</th> <th scope="col">B1</th> <th scope="col">B2</th> <th scope="col">B3</th> <th scope="col">B4</th> <th scope="col">C1</th> <th scope="col">C2</th> <th scope="col">C3</th> <th scope="col">C4</th> </tr> <tr> <th scope="row">Win IE 6</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="partial">P<sup>2</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>3</sup></td> </tr> <tr> <th scope="row">Win IE 5.5</th> <td class="partial">P<sup>2</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="partial">P<sup>2</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> </tr> <tr> <th scope="row">Win IE 5.0</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="partial">P<sup>2</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>1</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> <td class="partial">P<sup>3</sup></td> </tr> <tr> <th scope="row">Win Moz/FF</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="partial">P<sup>6</sup></td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Win NN 7.1</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="partial">P<sup>6</sup></td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Win Opera 7.x</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Win Opera 6.0</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>4</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac IE</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac Moz/Camino</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac FF</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N<sup>7</sup></td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac NN 7.1</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac Opera 7.5</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac Opera 6.0</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>4</sup></td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac Safari</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>5</sup></td> <td class="partial">P<sup>5</sup></td> <td class="partial">P<sup>5</sup></td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Mac OmniWeb 5.0b</th> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="partial">P<sup>5</sup></td> <td class="partial">P<sup>5</sup></td> <td class="partial">P<sup>5</sup></td> <td class="yes">Y</td> </tr> <tr> <th scope="row">Linux Moz 1.5</th> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes"></td> <td class="yes"></td> <td class="yes"></td> <td class="yes"></td> </tr> </table> Y = Yes, the gray container envelops the red float and there is no extra space beneath the float. N = No, the gray container does not envelop the red float. P = Partial, the gray container envelops the red float but leaves extra space beneath it, or the container will only contain the float if the container has certain characteristics (dimension, border, padding, etc.)</p> <sup>1</sup> This will only work if the container has a dimension assigned</p> <sup>2</sup> There is an extra 1 or 2 pixels of space below the float. line-height: 0 only fixes B2, not B1. Space not present in WinIE5.0 for A1 due to overflow: hidden, but this doesn't work for WinIE5.5 for A1.</p> <sup>3</sup> If the container does not have a dimension assigned, C1-3 will show an extra 1 pixel of space below the float, and C4 will not work at all.</p> <sup>4</sup> The container is 1 or 2 pixels too short (the float overlaps slightly).</p> <sup>5</sup> There is an extra 1 pixel below the float.</p> <sup>6</sup> This does not work in Win98, apparently due to font rendering differences. </p> <sup>7</sup> This is working at least since build 20040531, possibly before.</p> <h2>Notes</h2> <h3>Internet Explorer issues</h3> Overflow: hidden seems only to benefit WinIE5.0, which needs it when using a div with nothing in it, otherwise it shows a gap beneath the float. font-size: 0 does not fix this, and causes MacIE to "leave a big space beneath the float." Line-height: 0 gets rid of the gap only when the div has &nbsp; inside (or presumably other characters).</p> IE is also very dependent on font-size: 1px. Without it, many of the tests show extra space beneath the float.</p> <h3>Gecko issues</h3> Gecko seems to have a problem with empty divs, divs without height, and divs where the content is super small (more explanation of what this means below).</p> <h4>Super small content</h4> B2 will work in Gecko on WinXP and Win2K, but not Win98. It also will not work on Mac. This platform and OS dependency seems to be based on the font rendering differences between the different OS's. Why do I say this? Because messing with the font properties of B2 is what determines whether it will work or not. If you remove the font-size declaration entirely, it works in all Geckos. Increasing the font-size also makes it work. If you leave font-size: 1px in there, you can also get it to work by changing the &nbsp; to a character that takes up more horizontal space, such as an X.</p> Bruno Fassino created a page which shows the variation in clearing using different characters. Which characters work varies by platform and font: http://www.brunildo.org/cgi-bin/gecko_clear0.pl </p> The default font is Arial and the default size is 1px, but you can change it to see how the clearing changes based on font properties: http://www.brunildo.org/cgi-bin/gecko_clear0.pl?family=Times+New+Roman&size=2</p> Possible solutions to fix B2 for MacGecko:</p> <ul> [*]Remove font-size or set to 0 <ul> [*]fixes B2 for MacGecko [*]breaks B1 and B2 for WinIE 5.5, 6 (extra space) [*]breaks B1 for WinIE 5.0 (extra space) [*]breaks B2 for MacIE5.x (extra space) [*]doesn't hurt WinGecko, WinOpera [/list] [*]Set font-size to 2px <ul> [*]fixes B2 for MacGecko [*]breaks B1 for WinIE 5.0, 5.5, 6.0 (2 px extra space) [*]breaks B2 for MacIE5.x (extra space) [*]doesn't hurt WinGecko, WinOpera, Safari, MacOpera, OmniWeb [/list] [*]Set line-height to 1px <ul> [*]fixes B2 for MacGecko (conflicting reports - does not fix Moz1.4, does fix which version?) [*]breaks B1 and B2 for Win IE 5.0, 5.5, 6.0 [*]doesn't hurt WinGecko, WinOpera [/list] [/list] These tests need to be performed on Win98.</p> Another strange item of note: MacFirefox seems to have been recently cured of this buggy behavior. B2 was not working in Firefox 0.8 build 20040331, but is working in build 20040531.</p> <h4>Empty or zero height divs</h4> Adding a border or padding to the container, or a border to the clear, makes Gecko contain the floats in all examples. Evidently margin collapsing is going on, but I don't know where or why. This appears to be a manifestation of these bugs: http://bugzilla.mozilla.org/show_bug.cgi?id=209694 http://bugzilla.mozilla.org/show_bug.cgi?id=224057</p> The C tests were an attempt to solve this issue, because they assigned a height of 1px, but unfortunately C does not work well cross-browser.</p> <h3>Other variables that could possibly mess things up (not tested)</h3> <ul> [*]Do gaps appear when you zoom text? [*]Content running next to the float [/list]<h2>Testers</h2> <ul> [*]Susanne Jaeger - Win98 [*]Brain Ally - Linux, MacOSX [*]Kat Rasmussen - MacOSX (10.1.2), Mac9.2 [*]Georg - Win2Kpro [*]Bruno Fassino - Win2K, MacOSX [*]Roger Johansson - MacOSX (10.3.4) [*]Donna Casey - WinXP, MacOSX (10.3.4) [*]Roger Roelofs - MacOSX (10.3.4)[/list]</body> </html>
__________________
</ulle> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Div's beim Scrollen horizontal verschieben | insider | Javascript & Ajax | 2 | 22.06.2014 15:48 |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11:23 |
mehrere Bilder innerhalb eines divs horizontal mittig platzieren | a-i-r | CSS | 2 | 09.12.2009 15:24 |
Divs horizontal anordnen, mit <li>, float? | funky^mariechen | CSS | 12 | 29.08.2008 03:08 |
Problem: 3 Div's horizontal positionieren | Krieju | CSS | 2 | 07.05.2004 18:00 |