html - 在没有表格的情况下模拟具有列的行

Question

我有理由不想对表格使用 html 标记，但我正在尝试创建一个行结构，每行有三列。

这是我尝试过的:http://jsfiddle.net/3rpu0hb5/5/

HTML

  <div id="row">
    <div id="name">
        <h4>First Col</h4>
        <p>...</p>
    </div>
    <div id="detail">
        <h4>Middle Col</h4>
        <p>...</p>
    </div>
    <div id="location">
        <h4>Right Col</h4>
        <p>...</p>
    </div>
    </div>

CSS

.row .name {width: 200px; float:left;}
.row .detail {width: 200px; float:left;}
.row .location {width: 200px; float:left;}

这里缺少什么，因为它们仍然显示在彼此下方？

Answer 1

您使用了类选择器 .row 而不是 id 选择器 #row

#row div {width: 200px; float:left;}

http://jsfiddle.net/3rpu0hb5/11/