在多列中展示信息的最佳方式是什麼？

我設法做到了這一點，但我覺得我已經以很差的方式做到了這一點。

我製作了一個名爲'leftlayer'的圖層和樣式，它左側浮動。然後有一個叫做'leftlayer2'的風格的圖層也浮在左邊，以保持我想要的信息順序。然後，一個名爲'rightlayer'的圖層浮動到右側。

我應該改爲使用表格，還是將所有內容放在不同的圖層中？什麼是最好的方法？

我的代碼：

<html> 
<head> 
<title>Test page</title> 
<link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<div id="Layer0"> 
<div id="Layer1" class="Layer1"> 
<h3 align="left">A menu</h3> 
<div align="left"> 
<ul class="BLUE"> 
<li><a href="#">item 1</a></li> 
<li><a href="#">item 2</a></li> 
</ul> 
</div> 
</div> 
<div id="Layer2"> 
<h1>Artcile heading</h1> 
<div id="leftlayer" class="leftlayer"> 
<p><strong>Random info 1: </strong>blah 
</p> 
<p><strong>Random info 2: </strong>blah blah 
</p> 
<p><strong>Random info 3: </strong>anything 
</p> 
<p><strong>Random info 4: </strong>more text 
16:46:29 </p> 
<p><strong>Random info 5: </strong>and so on 
</p> 
<p><strong>Random info 6: </strong>such as 
</p> 
<p><strong>Random info 7: </strong>sport 
</p> 
</div> 
<div class="leftlayer2"> 
<p><strong>Random info 1: </strong>blah 
</p> 
<p><strong>Random info 2: </strong>blah blah 
</p> 
<p><strong>Random info 3: </strong>anything 
</p> 
<p><strong>Random info 4: </strong>more text 
16:46:29 </p> 
<p><strong>Random info 5: </strong>and so on 
</p> 
<p><strong>Random info 6: </strong>such as 
</p> 
<p><strong>Random info 7: </strong>sport 
</p> 
</div> 
<div class="leftlayer2"> 
<p><strong>Random info 1: </strong>blah 
</p> 
<p><strong>Random info 2: </strong>blah blah 
</p> 
<p><strong>Random info 3: </strong>anything 
</p> 
<p><strong>Random info 4: </strong>more text 
16:46:29 </p> 
<p><strong>Random info 5: </strong>and so on 
</p> 
<p><strong>Random info 6: </strong>such as 
</p> 
<p><strong>Random info 7: </strong>sport 
</p> 
<form name="testForm"> 
<p><input name="radiobutton" value="test1" type="radio">Test</p> 
<p><input name="radiobutton" value="test2" type="radio">test</p> 
<p><input name="radiobutton" value="test3" type="radio">Test</p> 
<p><input name="radiobutton" value="test4" type="radio">test</p> 
<input name="Submit" value="Update" type="submit"> 
</form> 
</div> 
<div id="rightlayer"> 
<a href="#"> 
<img src="img.jpg" height="300" width="199"> 
</a> 
<p> 
<a href="#">Click for full description </a> 
</p> 
<p><a href="#">DELETE</a> 
</p> 
</div> 
<div id="Layer3"> 
<h1>A list of records</h1> 
<table border="0" width="85%"> 
<tbody> 
<tr> 
<td width="15%"><strong>Column 1</strong></td> 
<td width="10%"><strong>Column 2</strong></td> 
<td width="65%"><strong>Column 3</strong></td> 
<td width="10%"><strong>Column 4</strong></td> 
</tr> 
<tr id="article_250405322811"> 
<td><a href="#">Some info</a></td> 
<td><a href="#">more info</a></td> 
<td><a href="#">Even more info</a></td> 
<td>No more info</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div id="tablefooter" class="tablefooter"> 
<div id="tablefooterleft" class="tablefooterleft"><a href="#">&lt;&lt;-First</a> 
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a> 
----------------------------------------------------------------- 
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">Next -&gt; </a> 
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last-&gt;&gt;</a> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

的CSS：

#Layer0 { 
    width: 100%; 
    height: 100%; 
} 

body{ 
margin:10px 10px 0px 10px; 
padding:0px; 
color:#999999; 
font-family:"Trebuchet MS",arial,sans-serif; 
font-size:70.5%; 

} 

#Layer2 { 
background:#fff; 
color:#000; 
voice-family: "\"}\""; 
voice-family: inherit; 
padding:20px; 

} 

#Layer2 p {color:#888;} 

#Layer2 a, a:link { color:#006633; text-decoration: none;} 

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;} 

html>body #Layer2 { 
} 

p,h1,pre { 
margin:0px 10px 10px 10px; 
font:Arial, Helvetica, sans-serif; 
font-size:12px; 
line-height: 1.6em; 
text-align:justify; 
text-decoration:none; 
} 

h1 { 
font-size:2.5em; 
text-align: center; 
color:#ccc; 
padding-top:15px; 

} 

h3 { 
font-size:14px; 
color:#999; 

} 

.leftlayer { 
    float: left; 
    left: 20%; 
    width: 20%; 
    height: 100%; 
    margin-right: 10%; 
} 
.leftlayer strong { 
    text-align: left; 
} 
.leftlayer2 { 
    float: left; 
    width: 20%; 
    height: 100%; 
    margin-left: 2%; 
} 
#rightlayer { 
    float: left; 
} 
#Layer3 { 
    float: bottom; 
}

來源

2009-04-24 Joshxtothe4