Elenco di stili di div come layout a 2 colonne con css

Sto provando ASP.NET MVC 2 passando attraverso il tutorial "NerdDinner". Ma apparentemente la versione 2 di MVC non crea una pagina di dettagli come nel tutorial, e si ottengono div con classi CSS su di loro per lo stile. Tuttavia, voglio ottenere lo stile in cui ogni etichetta è seguita sulla stessa linea con il campo, e non posso farlo, li ottengo uno sopra l'altro, o se provo a usare float accadono cose strane (probabilmente perché Non so esattamente come usarlo in questa situazione, dove ogni altro div dovrebbe essere sulla stessa linea). Ecco il codice html generato per la pagina Dettagli:Elenco di stili di div come layout a 2 colonne con 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>

Come faccio ad avere il display-label e il display-campo per ogni "entry" ad apparire sulla stessa linea?

fonte

2010-06-16 Anders

Uguale @ risposta di Salil, ma invece di utilizzare un <br/> si può utilizzare un altro div attorno ad ogni "riga" e impostare manualmente il margine. Ti dà solo un po 'di controllo in più.

.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>

Inoltre, non dimenticate un <div style="clear:both"/> alla fine per ripristinare l'allineamento.

fonte

2010-06-16 17:27:23 Ryan

Grazie, funziona. Ma di nuovo, vedi il commento di Salil sulle mie speranze di poterlo fare solo da css ... Se non è possibile dovrò accettarlo, mi sembrava solo che ci fosse un modo ... – Anders

Tu potrebbe essere in grado di usare semplicemente '.display-label {clear: both; float: left} '. Ho sempre un wrapper div così non l'ho mai provato. – Ryan

Ottimo, ha funzionato! Grazie, questa è la risposta che stavo cercando. Ora c'è solo un problema: se metto dei bordi attorno a loro per emulare una tabella, i campi di visualizzazione sono a destra, e il padding non sembra aiutare perché sembra riferirsi al bordo più a sinistra del " table "(dove è l'etichetta del display) ... Qualche idea su come aggirare questo? – Anders

Prova

.display-label{ 
    float:left; 

} 
.display-field{ 
    float:left; 
}

<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>

fonte

2010-06-16 16:48:25 Salil

Grazie, ma non ha funzionato come previsto. Le righe sono state tutte avviate dopo la fine della riga precedente (in orizzontale) Inoltre, speravo che ci sarebbe stato un modo per definire la vista dei dettagli generati automaticamente senza modificare l'html, solo usando css ... – Anders

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

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

questo ha lavorato per me, fuori dalla scatola senza modificare il codice HTML, ma YMMV ...

Specificare la larghezza del campo Etichetta come suggerito da Anders lavora per aiutarli a fila.

fonte

2011-01-03 20:39:46 caveman

da [qui] (http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div?rq=1) ho appena centrato il contenuto della vista Dettagli in questo modo: '

'e usato il css sopra, grazie, la speranza aiuta qualcuno. – stom

Questo stile CSS ha funzionato bene nel mio progetto MVC 4. –

Elenco di stili di div come layout a 2 colonne con css

risposta

Problemi correlati