[SOLVED] wachsende divs + nebeneinander laufende divs

  • [SOLVED] wachsende divs + nebeneinander laufende divs

    Hi @ all

    Zur Demonstration habe ich folgendes Code-Beispiel:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" >
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Test</title>
    6. <style type="text/css">
    7. .asdf {
    8. border: 1px solid;
    9. width: 20px;
    10. }
    11. </style>
    12. </head>
    13. <body>
    14. <div style="width:200px; min-height:200px; margin 10px auto;background-color:#ff0000;">
    15. <div style="width:100px; min-height:100px; margin 10px auto;background-color:#00ff00">
    16. <div class="asdf">a<br />b</div>
    17. <div class="asdf">a<br />b</div>
    18. <div class="asdf">a<br />b</div>
    19. <div class="asdf">a<br />b</div>
    20. <div class="asdf">a<br />b</div>
    21. <div class="asdf">a<br />b</div>
    22. <div class="asdf">a<br />b</div>
    23. <div class="asdf">a<br />b</div>
    24. <div class="asdf">a<br />b</div>
    25. <div class="asdf">a<br />b</div>
    26. <div class="asdf">a<br />b</div>
    27. <div class="asdf">a<br />b</div>
    28. <div class="asdf">a<br />b</div>
    29. <div class="asdf">a<br />b</div>
    30. <div class="asdf">a<br />b</div>
    31. <div class="asdf">a<br />b</div>
    32. <div class="asdf">a<br />b</div>
    33. <div class="asdf">a<br />b</div>
    34. <div class="asdf">a<br />b</div>
    35. <div class="asdf">a<br />b</div>
    36. </div>
    37. </div>
    38. </body>
    39. </html>
    Alles anzeigen


    Ich hätte gerne

    * Die Div-Boxen nebeneinander (mit entsprechendem Zeilenumbruch
    * Die Umschließende Box wächst mit den Elementen mit

    Ohne weitere CSS sind die Boxen untereinander angeordnet. Verwende ich float:left so passt zwar der Umbruch und die Anordnung nebeneinander, aber die Umschließende Box wächst Nicht mehr mit. Verwende ich display:inline, so kommt das jeweilige a neben das b des vorherigen divs - hier passt dann gar nicht's mehr.

    EDIT://
    Die Antwort lautet display:inline-block - jedenfalls falls man nicht auf IE User achten will/muss
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von darthdespotism ()