Comment aligner ce contenu div correctement?

Voici ma mise en page,Comment aligner ce contenu div correctement?

Summary view http://img689.imageshack.us/img689/2500/yuidtsum.jpg

J'utilise un div et plusieurs portées pour obtenir le point de vue ci-dessus ... Regardez toutes les lignes ther ne sont pas correctement alignées ...

<div class="resultsdiv"><br /> 
<span style="width:200px;" class="resultName">' + employee.Emp_Name + '</span> 
<span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp; 
<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /> 
<span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span> 
<span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span> 
<span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp; 
<span class="resultfieldvalues">' + employee.Address + '</span> 
</div>

et mon CSS sont

.resultsdiv 
{ 
    background-color: #FFF;border-top:solid 1px #ddd; height:50px; border-bottom:solid 1px #ddd; padding-bottom:15px; width:450px; 
} 
.resultseven { background-color: #EFF1f1; } 
.resultshover { background-color: #F4F2F2; cursor:pointer; } 

.resultName 
{ 
    font-size:125%;font-weight:bolder;color:#476275;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif; 
} 
.resultfields 
{ 
    font-size:110%;font-weight:bolder;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif; 
} 
.resultfieldvalues 
{ 
    color:#476275;font-size:110%;font-weight:bold;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif; 
}

Toute suggestion pour l'obtenir correctement aligné .... Dois-je utiliser divs insted des travées pour obtenir ce correctement aligné ...

Source

2010-04-03 Chendur Pandian

Voici une ébauche de certains HTML et CSS réécrits. Je n'ai pas testé cela, mais cela devrait vous rapprocher. Postez une capture d'écran si cela ne fonctionne pas.

HTML

<div class="resultsdiv"> 
    <div class="name">' + employee.Emp_Name + '</div> 
    <div class="category"><span>Category :</span> ' + employee.Desig_Name + '</div> 
    <div class="salary_basis"><span>Salary Basis :</span> ' + employee.SalaryBasis + '</div> 
    <div class="salary"><span>Salary :</span> ' + employee.FixedSalary + '</div> 
    <div class="address"><span>Address :</span> ' + employee.Address + '</div> 
</div>

CSS

.resultsdiv { color: black } 
.resultsdiv span { color: #666 } 
.resultsdiv { width: 600px} 
.resultsdiv div { float: left } 
.resultsdiv .name { width: 230px; padding-right 20px; } 
.resultsdiv .category { width: 350px } 
.resultsdiv .salary_basis { clear: left; width: 180px; padding-right: 20px } 
.resultsdiv .salary { width: 180px; padding-right: 20px } 
.resultsdiv .address { width: 200px; }

Source

2010-04-03 05:29:00 gtd

@ dasil003 qui a très bien travaillé juste édité quelques-uns pour faire le mien de travail ... –

À mon avis, c'est le type de données qui devrait être dans une table. Ce n'est pas la mise en page, c'est tabulaire, en répétant les données.

Source

2010-04-03 05:16:17

Je suis d'accord. Étant donné que vous n'ajoutez pas d'éléments aux données, il est préférable d'utiliser une table. – Samuel

@samuel et Antony je sais qu'il peut être fait avec des tables ... Mais je veux utiliser divs .. –

ce n'est pas réellement des données tabulaires. pourrait être considéré comme un cas limite. Attends, je fouette quelque chose pour toi. – gtd

Comment aligner ce contenu div correctement?

Répondre

Questions connexes