Dynamische mehrzeilige Listenelemente in zwei Spalten verschieben

Question

Ich habe eine dynamische Liste, die ich brauche, um schön in 2 Spalten mit CSS Lineup und ich bin mit eine schreckliche Zeit mit ihm.

Der Aufschlag ähnelt dem hier:

<ul>
<li>A is for apples</li>
<li>B is for bananas which are yellow in color</li?
<li>C is for cupcakes</li>
....
</ul>

Wenn ich den Li's einfach eine Breite gebe und sie nach links verschiebe, werden sie komisch gelöscht und am Ende ähnlich formatiert wie hier:

A is for apples        B is for bananas which
                       are yellow in color
C is for cupcakes      D is for dirtbag

Ich brauche die Formatierung, um die 3. li direkt unter der ersten li zu erhalten - unabhängig von der Höhe eines der Listenelemente wie diese:

A is for apples        B is for bananas which
C is for cupcake       are yellow in color
D is for dirtbag

Der Text jeder li wird aus einer Datenbank gezogen, und ich habe keine Kontrolle darüber, wie lang die einzelnen li sind.

Update zur Klärung - Die Liste kann auch wie folgt aus der Datenbank stammen:

<ul>
<li>A is for apples that grow on trees</li>
<li>B is for boat</li>
<li>C is for cupcakes</li>
<li>D is for dishes - that sure don't wash themselves</li>
....
</ul>

Erfordert die Formatierung:

A is for apples that   B is for boat
grow on trees          C is for cupcake
D is for dishes -      E is.....
that sure don't wash
themselves

/Klarstellung

Mein Ersatzplan : Da die Reihenfolge nicht besonders wichtig ist, habe ich versucht, die Liste in zwei Hälften zu teilen und die beiden Spalten in zwei separaten Spalten auszudrucken. <ul> die links mit einer definierten Breite schwebt, aber mit jeder <li> mit einer variablen Höhe und der Datenbank, die zwischen 2-15 Elemente zurückgibt, sehen die unteren Spalten bei dieser Methode nicht gleichmäßig aus. Ich würde einfach lieber eine bessere Option finden, wenn möglich :/

Answer 1

Ist es das, worauf Sie aus waren?

http://jsfiddle.net/Mutant_Tractor/fe2as/

EDIT

JQuery-Ansatz:

$('li').each(function(e) {
    $var = $(this).height();
    if ($var > 25) {
        $(this).addClass('second')
    } else {
        $(this).addClass('first')
    }
});

Sie müssen es so anpassen, dass auch mehrere Zeilen hintereinander erscheinen können...

Answer 2

Ich fürchte, Sie haben kein Glück, bis der IE mehrspaltige css3-Unterstützung bietet.

Sie könnten es natürlich verwenden und eine Javascript-Lösung für IE verwenden (es gibt mehrspaltige Plugins für jQuery zum Beispiel), aber Ihr Backup-Plan scheint eine einfachere Lösung.

Answer 3

Wenn Sie bereit sind, in einigen Javascript zu arbeiten, habe ich den folgenden Code verwendet, um das gleiche Problem für IE 9+ zu lösen (das ist alles, was gescannt wurde, so kann ich nicht garantieren, dass es in älteren IE-Versionen funktionieren wird).

Grundsätzlich werden Elemente nach links oder rechts verschoben (über CSS mit dem left y right Klassen), je nachdem, welche Spalte gerade kürzer ist.

Bemerkenswert ist, dass dieser Code innerhalb eines View-Objekts deklariert wird, so dass die erste this verweist auf das umhüllende Element (in Ihrem Fall die <ul> ).

alignContainers: function() {
    var thisView = this,
        numOfElements = 0;

    thisView.$el.find("> div").removeClass("left right")
    .each( function() {

        if (this.offsetHeight != 0 && this.offsetWidth != 0) {
            var leftHeight = 0,
                rightHeight = 0;

            thisView.$el.find(" > .left").each(function() {
                leftHeight += this.offsetHeight;
            });

            thisView.$el.find(" > .right").each(function() {
                rightHeight += this.offsetHeight;
            });

            if (numOfElements == 0) {
                $(this).addClass("left").removeClass("right");                            
            } else if (leftHeight < rightHeight) {
                $(this).addClass("left").removeClass("right");
            } else {
                $(this).addClass("right").removeClass("left");       
            }

            numOfElements++;

        } else {
            $(this).removeClass("left right")
        }
    });
}

Answer 4

Sie müssen Folgendes verwenden eine Definitionsliste .

<dl>
   ...   
   <dt>B</dt>
   <dd>is for bananas which are yellow in color</dd>
</dl>