以表格/网格格式显示div

Question

I'm currently struggling to present a div structure in a certain way. Unfortunately I can only do this via css as our database system outputs the html. Basically I am trying to present the code below in the format shown in the picture:

<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 type refers to the darker heading on the left and class_value refers to the content.

Do any of you have any recommendations of how to acheive this via css? Any help would be greatly appreciated. JQuery and javascript can be used to append classes where necessary if required.

Answer 1

http://jsfiddle.net/NVDjU/

Using your uploaded image as an example, this method uses floats and arbitrary widths that you can change, but may do the trick.

.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

The above being said, in the likely event that you're stuck with the markup they give you, you could use display:table*, though you'll have to be careful of old browsers if you have to support before IE8.

Given:

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

You could use css like this:

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

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

Obviously, the border styles are there just to illustrate the point...

Read up on display: table, see if that gets you where you need to be. http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

(Example jsFiddle: http://jsfiddle.net/mori57/SguEb/ )

Answer 3

The best I can think of is something like this:

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

There are obviously inherit issues here since it's based on forcing the floats to break a line with set widths, which is a crap way to do it but I can't think of another way.

• First you're only going to get one column if all that data is inside the job_classifications div as it looks like it is.
• If you ever have data overrun the fixed width this layout cuts it off.