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

问题描述：

我设法做到了这一点，但我觉得我已经以很差的方式做到了这一点。

我制作了一个名为'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; 
}

答

不，你不应该使用一个表！ < div>标签是做布局的正确方法！

阅读关于CSS列布局在互联网上：

Exploring the limits of CSS layouts
CSS multi column layout resources

打击多发性建议I don't recommend CSS grids无论是。

加：

你错过了你的身体标记
你应该缩进代码，这是很难读这样的

答

玉碎<div>方法进行布局的东西，但显示使用<table>标签（这正是为什么首先引入该标签）的常规表格数据（如来自表格的记录）。

掌握，你需要更好地了解CSS positioning model.

答

呈现多列信息的最佳方式，在我看来，使用电网的框架，像Blueprint CSS基于DIV布局技巧。

（表格是否定的。与div的+ CSS）

蓝图（以及其他类似的框架）是去

非常容易使用
让你很轻松地创建/调节任意数量的列，你想跨越
工作所有的浏览器（包括IE6）
允许你这样做很复杂的网格布局，以及轻松（创建一个简单的2或3柱状还是很容易）

我看到它的方式，手工编码的布局 - 尽管它们工作正常 - 不能很好地扩展，并且在尝试添加其他布局元素时往往需要重新设计。使用网格框架的布局相当容易维护，您可以立即开始运行（适用于各种布局，简单而复杂）。试试看:)

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

相关推荐