Wie erstelle ich ein zweispaltiges Snaking-Layout in ASP.NET MVC?

Ich habe ungefähr hundert Kurztext-Datenelemente (diese Zahl kann erheblich variieren), die ich in eine Seite einfügen möchte und den Browser in drei Spalten innerhalb eines umgebenden divs verwalten lasse, angeordnet mit den heruntergehenden Elementen und dann across, wie folgt aus:Wie erstelle ich ein zweispaltiges Snaking-Layout in ASP.NET MVC?

A F L 
B G M 
C H N 
D I O 
E K ...

gibt es eine Möglichkeit, dies als li zu machen (oder vielleicht auch nur einzelne Linien), und haben den Browser automatisch höhengleiche Spalten, möglicherweise in drei collate mit CSS?

Gibt es Browserkompatibilitätsprobleme?

Quelle

2009-07-21 Robert Harvey

Sie erwähnten "Browser" verwendet. Ich denke, reines CSS ist nicht möglich. Aber Sie können es sicherlich Javascript tun. Suchst du auch nach Möglichkeiten in Javascript? – xandy

Sicher, ich bin offen für Javascript. –

Ohne Browser Kompatibilitätsprobleme:

<% var rows = source.Count() % 3 == 0 ? source.Count/3 : (source.Count/3) + 1; %> 
<table> 
    <% for(int i=0; i<rows; i++) { %> 
    <tr> 
     <td><%= source.Skip(i).FirstOrDefault() %></td> 
     <td><%= source.Skip(i+rows).FirstOrDefault() %></td> 
     <td><%= source.Skip(i+rows*2).FirstOrDefault() %></td> 
    </tr> 
    <% } %> 
</table>

Wir verwenden den Modulo-Operator, uns zu informieren, wenn die Division selbst ist oder nicht ... wenn es nicht der Fall ist, werden wir nicht eine zusätzliche Zeile hinzufügen für die übrig gebliebenen Spalten. Weitere Informationen, http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx

Zum Beispiel sieht https://stackoverflow.com/users HTML-Quelle - es <table>

Quelle

2009-07-21 05:20:20

Ich denke, wenn Sie nicht gegen diese Lösung sind, ist es wahrscheinlich am meisten bevorzugt. Ihr resultierender Code wird wesentlich effizienter sein, als wenn Sie ihn mit Javascript auf der Clientseite bearbeiten müssen. – Odd

Das ist wirklich elegant. Kandidat für die richtige Antwort, obwohl ich eine clientseitige Lösung gefunden habe, die ich in Kürze posten werde. –

Dann legen Sie diese in ein Div, dessen Breite korrekt festgelegt ist.

Quelle

2009-07-21 02:35:32 griegs

Was ist mit der Höhe der äußeren div? Wird sich das verwalten? –

Woher weiß es, dass es drei Spalten sein soll? –

Yeah sollte tun. Ich erinnere mich nie daran, die Höhe einstellen zu müssen. Das Problem, das Sie möglicherweise haben, ist mit dem Inhalt und den Breiten. zB: Wenn Sie die Spalten a, b, c haben, dann eine andere Reihe von, horrndolisch, e, f dann haben Sie ungerade Spalten. Legen Sie also die Breite der einzelnen Spalten-Divs fest. offensichtlich tun dies in einem style-tag. :) – griegs

In der CSS-Welt ist das die einzige Art, wie ich drei Spalten außerhalb einer Tabelle natürlich machen kann.

<html> 
    <div style="width:100px"> 
     <div style="float:left; width:33%;">a</div> 
     <div style="float:left; width:33%;">bsdf</div> 
     <div style="float:left; width:33%;">c</div> 
     <div style="float:left; width:33%;">d</div> 
     <div style="float:left; width:33%;">e</div> 
     <div style="float:left; width:33%;">f</div> 
     <div style="float:left; width:33%;">g</div> 
    </div> 
</html>

Natürlich würden Sie nicht alle diese Stil-Tags verwenden, stattdessen würden Sie einen tatsächlichen Stil verwenden. Beachten Sie die 33% als Breite.

Ich habe dies in IE und FirFox und keine Probs auf beide versucht.

Quelle

2009-07-21 02:48:08 griegs

Ich habe auch versucht, die Breite des Elternteils auf 500px und das Ganze blieb als drei Spalten. – griegs

Mmm, nicht gut. Es macht drei Spalten, aber es sortiert zuerst von links nach rechts. Ich muss es zuerst von oben nach unten sortieren. –

Ist das nicht nur die Reihenfolge, in der du die inneren divs platzierst? Ich bin mir ziemlich sicher, und mein CSS ist kein Expertenlevel, das, was Sie tun wollen, ist nicht machbar. Obwohl jetzt jemand da draußen mich beweisen muss, dass ich falsch liege. – griegs

html kann (tatsächlich tut wirklich wichtig ist):

<div class="3col_vert"> 
    <div>a</div> 
    <div>b</div> 
    <div>c</div> 
    <div>d</div> 
    ... 
</div>

In Javascripts (Beispiel in jquery insbesondere), müssen Sie sie mit cols wickeln, so dass die resultierende HTML (nach der Manipulation von JavaScript) werden wird:

<div class="3col_vert"> 
    <div class="col_left"> 
     <div>a</div> ... 
    </div> 
    <div class="col_centre"> 
     <div>e</div> ... 
    </div> 
    <div class="col_right"> 
     <div>g</div> ... 
    </div> 
</div>

JQuery wird mainpulate sein:

var vert_divs = $(".3col_vert div"); 
// Remove them from parent 
$(".3col_vert").empty() 
    .append("<div class='col_left'></div>") // append the wrapper cols to parent 
    .append("<div class='col_center'></div>") 
    .append("<div class='col_right'></div>"); 

// Now place them to the wrappers 
var totalDivs = vert_divs.length; // count number of match divs 

vert_divs.each(function(i) { 
    if (i < totalDivs/3) 
     $(this).appendTo(".3col_vert div.col_left"); 
    else if (i<totalDivs * 2/3) 
     $(this).appendTo(".3col_vert div.col_center"); 
    else 
     $(this).appendTo(".3col_vert div.col_right"); 
});

Die c Ode oben ist nicht zu optimiert (ich bin sicher, dass viele bessere Algorithmus tun können), aber die Idee ist da, verwenden Sie Javascript, um die HTML in etwas wie die oben genannten zu manipulieren, indem Sie die erste 1/3 nach links Spalte, zweite 1/3 zu zentrieren, und der Rest nach rechts. Der letzte Job ist die Verwendung von CSS, um sie in 3 Spalten zu fassen, was ich hier nicht behandeln werde, aber es gibt Unmengen an Tutorials, zum Beispiel this one ist eines dieser Beispiele.

Quelle

2009-07-21 04:00:44 xandy

Genau das, was ich zu schreiben begann, als ich diese Antwort sah, solange der Benutzer mit jQuery vertraut ist, wird es sehr gut funktionieren. – Odd

Bevor ich jquery treffe, schreibe ich kein Client-Skript, Javascript ist eher so, als würde man den Browser-Unterschied anstatt der Produktivität angehen. BTW, wenn jemand mit anderen Framework vertraut ist oder nur in Javascript implementieren, ist das immer noch in Ordnung, da es nur das Markup manipuliert, um "Hilfe" CSS seine Arbeit zu tun. – xandy

Danke, Xandy. Siehe auch meinen neuen Beitrag unten. –

verwenden Sie können dies allein in CSS nicht tun - obwohl @griegs hat gezeigt, wie über dann nach unten zu tun.

Wenn Sie immer 3 Spalten wollen dies sollte mit einem kleinen Server-Side-Code und CSS einfach sein - Sie so etwas wie schreiben für jedes Element im Grunde:

<li>item</li>

Dann bei count/3 und count*2/3 add:

</ul><ul>

Damit Sie am Ende mit etwas wie:

<style> 
    .three-column-panel > ul { 
     float:left; width:33%; list-style-type: none; text-indent:0; } 
</style>  

<div class="three-column-panel"> 
    <ul> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
    </ul> 
    <ul> 
     <li>d</li> 
     <li>e</li> 
     <li>f</li> 
    </ul> 
    <ul> 
     <li>g</li> 
     <li>h</li> 
    </ul> 
</div>

Quelle

2009-07-21 07:57:28 Keith

Ich mag die Idee, die Spaltenhöhe serverseitig zu behandeln. Es könnte sich lohnen, eine HTMLHelper-Erweiterungsmethode zu schreiben. –

Nach Xandy Javascript vorgeschlagen, ich habe für jQuery Plugins einige googeln, und fanden diese:

Zeitungskolumnen JQuery Plugin
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/

Verbrauch:
Sie benötigen einen Container mit Elementen wie

<div id="npContainer"> 
    <div class="npItem">Item1</div> 
    <div class="npItem">Item2</div> 
</div>

... und Sie brauchen die Spalten

<div id="npColumn1"></div> 
<div id="npColumn2"></div> 
<div id="npColumn3"></div>

In Javascript einfach anrufen:

jQuery().npColumns();

Eine Webseite, die das Plugin
http://www.bregenzerwald-news.at/?classifieds=1

Quelle

2009-07-21 13:35:25

Interessant, Robert. – xandy

Wie erstelle ich ein zweispaltiges Snaking-Layout in ASP.NET MVC?

Antwort

Verwandte Themen