如何对齐这个正确div的内容是什么？

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

我使用一个DIV并获得上述的观点很多跨度......看这些疗法都没有正确对齐的行...

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

和我的CSS是

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

任何建议把它对准正确....我应该使用div的insted的跨度得到这个正确对齐......

来源

2010-04-03 Chendur Pandian

下面是一些重写HTML和CSS的粗剪。我没有测试过这一点，但它应该让你接近。张贴的截图，如果它不能正常工作。

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

来源

2010-04-03 05:29:00 gtd

@ dasil003，woorked很好，只是编辑了几个让我的工作... – 2010-04-03 05:35:37

在我看来，那就是应该在一个表中的数据的类型。这不是布局，它的表格，重复数据。

来源

2010-04-03 05:16:17

我同意。因为你没有向数据添加元素，所以最好使用表格。 – Samuel 2010-04-03 05:18:19

@samuel和安东尼我知道它可以完成与表...但我想使用div .. – 2010-04-03 05:20:54

它实际上不是表格数据。可以被认为是一个临界案例。坚持我正在为你掀起一些东西。 – gtd 2010-04-03 05:22:51

如何对齐这个正确div的内容是什么？

回答

相关问题