Style-Liste von Divs als 2-Spalten-Layout mit CSS

Ich versuche ASP.NET MVC 2 durch das "NerdDinner" -Tutorial. Aber anscheinend erstellt Version 2 von MVC keine Details Seite wie im Tutorial, und Sie bekommen divs mit CSS-Klassen auf sie zu stylen. Ich möchte jedoch den Stil, bei dem jedes Label in der gleichen Zeile wie das Feld folgt, und ich kann es nicht machen, ich bekomme sie übereinander, oder wenn ich versuche, floats zu verwenden, passieren seltsame Dinge (wahrscheinlich weil Ich weiß nicht genau, wie man es in dieser Situation benutzt, wo jedes andere div auf der gleichen Linie sein sollte). Hier ist die erzeugte HTML-Code für die Details-Seite:Style-Liste von Divs als 2-Spalten-Layout mit CSS

<fieldset> 
     <legend>Fields</legend> 
     <div> 
     <div class="display-label">DinnerID</div> 
     <div class="display-field"><%: Model.DinnerID %></div> 

     <div class="display-label">Title</div> 
     <div class="display-field"><%: Model.Title %></div> 

     <div class="display-label">EventDate</div> 
     <div class="display-field"><%: String.Format("{0:g}", Model.EventDate) %></div> 

     <div class="display-label">Description</div> 
     <div class="display-field"><%: Model.Description %></div> 

     <div class="display-label">HostedBy</div> 
     <div class="display-field"><%: Model.HostedBy %></div> 

     <div class="display-label">ContactPhone</div> 
     <div class="display-field"><%: Model.ContactPhone %></div> 

     <div class="display-label">Address</div> 
     <div class="display-field"><%: Model.Address %></div> 

     <div class="display-label">Country</div> 
     <div class="display-field"><%: Model.Country %></div> 

     <div class="display-label">Latitude</div> 
     <div class="display-field"><%: String.Format("{0:F}", Model.Latitude) %></div> 

     <div class="display-label">Longitude</div> 
     <div class="display-field"><%: String.Format("{0:F}", Model.Longitude) %></div> 

     <div class="display-label">IsValid</div> 
     <div class="display-field"><%: Model.IsValid %></div> 
     </div> 
    </fieldset>

Wie erhalte ich die Anzeige-Label und Display-Feld für jeden „Eintrag“ auf der gleichen Linie erscheinen? Versuchen

Quelle

2010-06-16 Anders

Gleiche wie @ Salil Antwort, sondern eine <br/> verwenden Sie einen anderen div um jede "Reihe" verwenden können und manuell an die Marge. Es gibt dir nur ein bisschen mehr Kontrolle.

.itemrow 
{ 
    margin-bottom: 10px; 
} 

<div class="itemrow"> 
    <div class="display-label">DinnerID</div> 
    <div class="display-field"><%: Model.DinnerID %></div> 
</div> 
<div class="itemrow"> 
    <div class="display-label">Title</div> 
    <div class="display-field"><%: Model.Title %></div> 
</div>

Vergessen Sie auch nicht <div style="clear:both"/> am Ende die Ausrichtung zurückgesetzt werden.

Quelle

2010-06-16 17:27:23 Ryan

Danke, das funktioniert. Aber wieder, sieh den Kommentar für Salil über meine Hoffnungen in der Lage zu sein, es allein durch css zu tun ... Wenn es nicht möglich ist, muss ich das akzeptieren, es schien mir nur, dass es einen Weg geben sollte ... – Anders

Du könnte einfach '.display-label verwenden {clear: both; float: links} '. Ich habe immer eine Wrapper div, also habe ich das noch nie probiert. – Ryan

Großartig, das hat funktioniert! Danke, das ist die Antwort, nach der ich gesucht habe. Jetzt gibt es nur ein Problem: Wenn ich Grenzen um sie herum platziere, um eine Tabelle zu emulieren, sind die Anzeigefelder direkt an der Grenze, und das Padding scheint nicht zu helfen, da es sich auf den äußersten linken Rand der Tabelle zu beziehen scheint. Tabelle "(wo das Display-Label ist) ... Irgendeine Idee, wie man das umgehen kann? – Anders

.display-label{ 
    float:left; 

} 
.display-field{ 
    float:left; 
}

Und

<div class="display-label">DinnerID</div> 
    <div class="display-field"><%: Model.DinnerID %></div> 
    <br/> 
    <div class="display-label">Title</div> 
    <div class="display-field"><%: Model.Title %></div>

Quelle

2010-06-16 16:48:25 Salil

Danke, aber es hat nicht ganz wie erwartet funktioniert. Die Zeilen starteten alle nachdem die vorherige Zeile geendet hatte (horizontal) Außerdem hatte ich gehofft, dass es eine Möglichkeit geben würde, die standardmäßig generierte Detailansicht zu formatieren, ohne den HTML-Code zu ändern, nur indem man css benutzt ... – Anders

.display-label{ 
    float:left; 
    clear:left; 
    width:250px; 
} 

.display-field{ 
    float:left; 
    clear:right; 
}

Das funktionierte für mich ohne Änderung in HTML-Markup aus der Box, aber YMMV ...

die Breite des Beschriftungsfeld angeben, wie von Anders vorgeschlagen arbeitet sie in einer Reihe aufstellen zu helfen.

Quelle

2011-01-03 20:39:46 caveman

von [hier] (http://stackoverflow.com/questions/114543/horizontal-center-a-div-in-a-div?rq=1) ich zentrierte nur die Details Ansicht Inhalt auf diese Weise: '

'und die oben genannten css verwendet, danke, hoffe jemand hilft. – stom

Dieses css Styling funktionierte gut in meinem MVC 4 Projekt. –

Style-Liste von Divs als 2-Spalten-Layout mit CSS

Antwort

Verwandte Themen