0

我想显示一个复杂记录的列表，并试图简单地将其放入表格中似乎效果不佳。

我想要这样的布局：

小样

每条整条记录都可以放入一个表格单元格（每行一个单元格），然后我可以<div>在每个单元格中使用标签。将 div 放入表格单元格是否可能导致显示问题？无论如何，它可以简单地用 div 完成，所以也许这是一个坏主意。

在每条记录中，都有相当多的组件。如果我用 div 布置这些，我需要做些什么来确保每个标签/值对都处于正确的位置？还是有更好的方法来确保布局一致？

显然，每条记录的值都会不同，因此为了保持一致的外观，我需要将标签全部垂直排列。

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

4

3 回答 3

2

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

虽然看着你的模型，但从语义上讲，我会说它不是一张桌子。没有列、列标题等。

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

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

此外，如果您需要完全一样的 ID，您可以在每个 li 中使用一个图例元素。

于 2012-06-11T23:41:30.160 回答
1

如果您正在查看 HTML 5，文章标签可能适合此处。您拥有“作者元素”这一事实似乎使其非常适合。如果您不看 HTML 5，只需使用 adiv而不是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;
}

看到这个小提琴

注意：使用清除修复而不是清除 div。

于 2012-06-12T04:17:46.590 回答
1

这样的事情怎么样。

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/

于 2012-06-12T04:53:28.817 回答