0

我目前正在努力以某种方式呈现 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 在必要时附加类。

在此处输入图像描述

4

3 回答 3

2

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;
}
于 2012-11-16T15:50:30.090 回答
0

综上所述，如果您对他们给您的标记感到困惑，您可以使用 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/）

于 2012-11-16T15:35:44.137 回答
0

我能想到的最好的是这样的：

​.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 中，那么您只会得到一列。
  • 如果您的数据超出了固定宽度，则此布局会将其切断。
于 2012-11-16T15:44:26.217 回答