chris340: Textbox vertikal an benachbarten Elementen ausrichten

Beitrag lesen

AAALSO....

Habe viel gelesen und viel probiert und eine Lösung! :-)
  - und dachte, ich schreibe das hier noch schnell auf.

Habe zwei Probleme bei Deiner Lösung, Gunther, gefunden:

__Zuerst mal hab ich eine wahrscheinlich noch wichtigere Begründung gefunden, warum es "display:table;" gibt als diejenige, dass so die Formatierung aus dem Elementfluss herausgehalten wird.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Hier steht:
"[...] Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. "

Also nach meinem Verständnis sollte es auch hier demnach um tabellarische Daten gehen, nur eben, dass XML mit den Daten umgehen kann.

__Zum anderen hatte ich bei deiner Lösung ein Problem mit den Abständen. Wie man in deinem Code sieht, hattest du das Problem auch schon: nämlich, dass "margin" nicht funktioniert und man stattdessen die Tabelleneigenschaften (in diesem Falle "border-spacing") nutzen muss (logisch eigentlich).
Nur gibt es für "border-spacing" keine Möglichkeit, die Abstände der vier Seiten separat anzugeben. Genau das möchte ich aber: Abstände zwischen den Boxen, aber nicht nach links (das Container-div hat hier in diesem thread zur Anschauung einen Rahmen, nicht jedoch in meinem Projekt... ;-) )

Also habe ich mich doch um die Flexbox gekümmert. Und nach viel Lesen und Probieren die bzw. eine Lösung gefunden.

Geholfen haben mir neben dem schon erwähnten Flexbox-Spielzeug folgende Quellen:
__http://umaar.github.com/css-flexbox-demo/
__http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
__https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Hier also meine Lösung. (übrigens auch mein erstes Fiddle. ;-) )

Sie funktioniert leider beim IE erst ab Version 10 (konnte es nicht testen, aber laut dieser Seite und laut dieser ist das so. Ältere IE stellen die Boxen einfach übereinander dar (ohne Stretch). Aber damit kann ich leben.

Ich poste den Code nochmal hier (bin mir nicht so sicher, ob ich darauf vertrauen kann, dass sich "Fiddles" genauso lange im Netz halten wie Beiträge in diesem Forum... ;-) ):

  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Diplay Table Test</title>  
    <style type="text/css">  
        #box_wrapper {  
            width: 900px;  
            height: 500px;  
            margin: 0 auto;  
            border: solid 1px #0000FF;  
  
            display: -webkit-box;  
            display: -moz-box;  
            display: box;  
            display: -webkit-flexbox;  
  
            -webkit-box-orient: vertical;  
            -moz-box-orient: vertical;  
            box-orient: vertical;  
            -webkit-flex-direction: column;  
  
            -webkit-box-align: start;  
            -moz-box-align: start;  
            box-align: start;  
            -webkit-flex-align:start;  
        }  
  
  
        #box_wrapper li {  
        border: 1px solid red;  
        width: 300px;  
        }  
  
  
        #stretch_me {  
        margin-top:20px;  
        margin-bottom:20px;  
        -webkit-box-flex: 1;  
        -moz-box-flex: 1;  
        box-flex: 1;  
        -webkit-flex: 1;  
        }  
  
    </style>  
  
</head>  
<body>  
  
    <ul id="box_wrapper">  
        <li>  
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        </li>  
        <li id="stretch_me">  
                Lorem ipsum dolor sit amet, ...  
        </li>  
        <li>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
        </li>  
    </ul>  
</body>  
</html>  

Zur Erklärung: Es ist so, dass das Flexbox-Modul in den letzten drei Jahren einige Veränderungen durchgemacht hat und sich immer noch im "Working Draft"-Status befindet, d.h. es kann sich noch verändern.
Deshalb gibt es da jeweils vier (!) Versionen der Eigenschaften. Ausser der jeweils zweiten Variante mit "-moz-" ist mir nicht ganz klar, welche Variante von welcher Version von welchem Browser benötigt wird. Die jeweils letzte Zeile ist wohl die, die in Zukunft gelten soll.
So wie ich das verstehe, dürfte man auf die Weise die größtmögliche Anzahl Browser mit ins Boot holen.

YAY :-)

...nebenbei habe ich gelernt, dass es sich lohnt, sich mehr mit CSS3 zu beschäftigen! Transitions - ganz spannendes Thema... ;-)

Gute Nacht!
chris