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/

Answer 2

您可以简单地使用display:table和display:table-cell技巧：

#row{display:table;}
.disTableCell{display:table-cell;width: 200px;}

fiddle

Answer 3

你的行是id而不是类，所以替换'。' =＆GT; '＃'

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

使用没有表的列模拟行

3 个答案: