help converting this table to divs and css
This is drivi开发者_开发技巧ng me insane. how can i achieve the same effect like the table below but with divs and css.
<table>
<tr>
<td><label>label1</label></td>
<td>foo</td>
</tr>
<tr>
<td><label>label2</label></td>
<td>bar</td>
</tr>
</table>
EDIT
If foo or bar are long paragraphs they should not flow under the label column
Fixed width, floated labels are one way:
<p>
<label style="width: 100px; float: left;">Label 1</label> Foo
</p>
<p>
<label style="width: 100px; float: left;">Label 2</label> Bar
</p>
You could also discard the float property and use display: inline-block instead, but watch out for IE6.
<div style="width: 30%;">
<div style="float: right;">
<div>
foo
</div>
<div>
bar
</div>
</div>
<div style="float: left;">
<div>
<label>label1</label>
</div>
<div>
<label>label2</label>
</div>
</div>
</div>
You can view the output here: http://jsfiddle.net/Y7XZx/
HTML:
<ul>
<li>
<label> Label1 </label>
Foo
</li>
<li>
<label> Label2 </label>
Bar
</li>
</ul>
CSS:
label {
display:inline-block;
width:100px;
}
Live demo: http://jsfiddle.net/RFhur/1/
Styled live demo: http://jsfiddle.net/RFhur/2/
Here's a working example: http://jsfiddle.net/59GqN/.
It's complete overkill, but it seems to work. (I'd use tables if it takes me more than 20 minutes to figure out how to make it work without them. I do not promote them for site layout, though, but lay off the hate on the tables).
Good luck!
精彩评论