以表格/网格格式显示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/

使用上传的图像作为示例，此方法使用可以更改的浮动和任意宽度，但可能会有效。

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

Answer 2

上面说过，如果你遇到他们给你的标记，你可以使用display：table *，但是如果你必须在IE8之前支持你就必须小心旧的浏览器

假设：

<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>
</div>​​​​​​​​​

你可以使用这样的css：

.job_classifications {
    display:table;
    border: 1px solid green;
}

.classification, .class_type, .class_value {
    display:table-cell;
    border: 1px solid blue;
}    

显然，边框样式只是为了说明这一点......

阅读显示：表格，看看是否能满足您的需求。 http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

（示例jsFiddle：http://jsfiddle.net/mori57/SguEb/）

Answer 3

我能想到的最好的是：

​.class_type{
float:left​;
font-weight:bold;
background-color:#DDD;
width:125px;
}
.class_value{
float:left;
background-color:#FFF;
width:125px;
}
.job_classifications{width:250px;}

http://jsfiddle.net/calder12/G29nU/

这里显然存在继承问题，因为它基于强制浮点数以设置宽度打破一条线，这是一种废话方式，但我不能想到另一种方式。

• 首先，如果所有数据都在job_classifications div中，那么你只会得到一个列。就像它看起来一样。
• 如果您的数据超出固定宽度，则此布局会将其删除。