如何对复杂记录的行进行HTML布局？

Question

我想要显示一个复杂记录的列表，但试图简单地将其放入一个表中似乎效果不是很好。

我想要一个类似这样的布局：

​

​

每条完整的记录都可以放入一个表格单元格中(每行一个单元格)，然后我可以在每个单元格中使用<div>标记。将div放入表格单元格可能会导致显示问题吗？它可以简单地用div来完成，所以这可能是一个坏主意。

在每条记录中，都有相当多的组件。如果我用div来布置它们，我需要做什么来确保每个标签/值对都在正确的位置？或者有没有更好的方法来确保布局的一致性？

显然，每条记录的值都不同，所以为了保持一致的外观，我需要所有的标签都垂直排列。

如果这个问题看起来有点模糊，那是因为我对如何做的理解是模糊的……即使有一些帮助来澄清这个问题也是很棒的！

Answer 1

如果您正在研究HTML5，那么article tag可能适合这里。您有一个"Author元素“这一事实似乎使它非常适合。如果你不是在看HTML5，那就用div代替article。或者，正如@Moin Zaman提到的，在下面的示例中使用ul并使用li代替article。

至于确保标签等垂直排列，这是相当容易实现的。只需通过css显式设置宽度即可。

下面是一个快速示例：

HTML

<article>
    <h2>ID: 123</h2>
    <div class="actions">
        <input type="button" value="Do Someting" />  
        <input type="button" value="Do Someting Else" />  
        <input type="button" value="And Maybe something Else" />  
    </div>
    <div class="description">A fairly long description that takes up basically the entire width of the section, maybe even longer still</div>
    <div class="details">
        <div class="author"><span>Author:</span>Douglas Adams</div>
        <div class="created"><span>Created:</span>1 Jan 2012</div>
        <div class="label first"><span>Label 1:</span>Value</div>
        <div class="label"><span>Label 2:</span>Value</div>
        <div class="label"><span>Label 3:</span>Value</div>
        <div style="clear:both; line-height:0px;">&nbsp;</div><!-- Use A Clear Fix Instead of this, I got Lazy!! -->
    </div>
</article>

CSS

article
{
    border: solid 2px black;
    margin:20px;
    padding:5px;
    position:relative;
}

article h2
{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-15px;
    left:5px;
    display:inline;
}

article .actions
{
    float:right;
    width:25%;
    text-align:right;    
    position:relative;
}

article .actions input
{
    display:block;
    float:right;
    clear:both;
}

article .details
{
    position:releative;
    width:70%;
}

.author
{
    float:left;
    width:60%;
}

.created
{
    float:left;
    width:40%
}

.label
{
    float:left;
    width:30%;    
}    


.label span, .author span, .created span
{
    font-weight:bold;
    padding-right:3px;
}

请参阅this fiddle

注意：使用clear fix而不是清除div。

Answer 2

在表单元格中使用div很好。应该不会引起问题。

尽管看着你的模型，但从语义上讲，它不是一个表格。没有列、列标题等。

它看起来更像是一个包含更多详细信息的项目列表。

我会使用一个带有li和div的ul来进一步布局。

另外，如果您需要与此完全相同的ID，则可以在每个li中使用一个legend元素。

Answer 3

不如这样吧。

HTML

<div>
    <span class="label">ID 345</span>
<table>
<tr>
    <td class="desc" colspan="3">A fairly long description that takes up basically the entire width of the section, maybe even longer still</td>
    <td rowspan="3" class="doStuff">Do Something<br />Do another thing<br />Maybe 1 more thing</td>
</tr>
<tr>
    <td class="author"colspan="2"><span>Author: </span>Joe Bloggs</td>
    <td class="created"><span>Created: </span>19th June 2012</td>
</tr>
<tr>
    <td class="label3"><span>Label 3: </span>Value</td>
    <td class="label4"><span>Label 4: </span>Value</td>
    <td class="label5"><span>Label 5: </span>Value</td>
</tr>
</table>
</div>​

CSS

div{
    margin:17px 10px;
    border:2px solid #000;
}
span.label{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-10px;
    left:5px;
}
table{
    width:100%;
}
tr{
    background:#ccc;
}
td{
    padding:5px 7px;
}
span{
    font-weight:bold;
}

jsFiddle - http://jsfiddle.net/QActK/