javascript - 以表格/网格格式呈现 div

Question

我目前正在努力以某种方式呈现 div 结构。不幸的是，我只能通过 css 执行此操作，因为我们的数据库系统输出 html。基本上我试图以图片中显示的格式呈现下面的代码:

<div class="job_classifications">
    <div class="classification x_location">
       <div class="class_type">Location</div>
       <div id="location" class="class_value"> London</div>
    </div>

     <div class="classification refno">
       <div class="class_type">Ref No</div>
       <div class="class_value">80</div>
    </div>

类类型是指左侧较深的标题，class_value 是指内容。

对于如何通过 CSS 实现这一点，你们有什么建议吗？任何帮助将不胜感激。如果需要，JQuery 和 javascript 可用于在必要时附加类。

Answer 1

http://jsfiddle.net/NVDjU/

以您上传的图片为例，此方法使用 float 和您可以更改的任意宽度，但可能会成功。

.job_classifications {
    width: 420px;
    font-size: 11px;
    font-family: Arial;
}

.classification {
    float: left;
}

.classification .class_type {
    font-weight: bold;
    width: 80px;
    float: left;
}

.classification .class_value {
    float: left;
    margin: 0 10px 0 0;
    width: 100px;
}