开发者

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

help converting this table to divs and css

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!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜