如何爲複雜記錄的行做HTML佈局？

Question

我想顯示一個複雜記錄的列表，並試圖簡單地將它放入一個表中似乎沒有工作得很好。

我想的佈局是這樣的：

每個全程記錄可以被放入一個表格單元格（每行一個單元格），然後我可以在每個小區內使用的標籤。將div放入可能導致顯示問題的表格單元中？無論如何，它可以簡單地用div來完成，所以也許這是一個壞主意。

在每條記錄，有相當數量的組件。如果我使用div來展示這些內容，那麼我需要做些什麼來確保每個標籤/值對都處於正確的位置？或者有更好的方法來確保一致的佈局？

顯然每條記錄的值會有所不同，因此要保持一致的外觀，我需要的標籤，所有的線垂直向上。

如果這個問題似乎有點模糊，那是因爲我的怎麼辦呢理解是模糊......甚至一些幫助澄清這一問題將是巨大的！

Answer 1

如果您正在尋找在HTML 5，article tag可能適合這裏。事實上，你有一個「作者元素」似乎使它非常適合。如果你不看HTML 5，只需使用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是罰款。不應該引起問題。

雖然看着你的樣機，在語義上我會說，它不是一個表。不列，列標題等

它看起來更像是在他們的詳細信息項目的列表。

我會用李的和內部的div的UL進一步奠定的事情了。

此外，如果你需要的ID恰好坐在這樣，你可以使用一個傳奇元素每個L1內。

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/