Html 什么'；以多列形式呈现信息的最佳方式是什么？_Html_Css

Html 什么'；以多列形式呈现信息的最佳方式是什么？

html css

Html 什么'；以多列形式呈现信息的最佳方式是什么？,html,css,Html,Css,我有一个基本的页面布局，并希望安排在列信息我设法做到了这一点，但我觉得我做得很糟糕我制作了一个名为“leftlayer”的图层和样式，它向左浮动。然后是两个图层，样式为“leftlayer2”，也向左浮动，以保持信息的顺序。然后是一个名为“rightlayer”的层，它向右浮动我应该使用一张桌子，还是把所有的东西都放在不同的层中？最好的方法是什么我的代码： <html> <head> <title>Test page</title> <

我有一个基本的页面布局，并希望安排在列信息

我设法做到了这一点，但我觉得我做得很糟糕

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

不，你不应该用桌子div>标签是进行布局的正确方法

阅读有关internet上CSS列布局的信息：

反对频繁的建议

加上：

你丢失了你的身体标签
你应该缩进你的代码，这样读很难

对于布局内容，坚持使用

方法，但使用

标记显示常规表格数据（如表格中的记录）（这正是该标记最初引入的原因）

要掌握基于div的布局技巧，您需要更好地理解

在我看来，在多列中显示信息的最佳方式是使用网格框架，如

（表格是禁忌。与div+CSS搭配使用）

Blueprint（和其他类似的框架）是

非常容易使用
允许您非常轻松地创建/调整任意数量的列
跨所有浏览器（包括IE6）工作
允许您轻松地进行非常复杂的网格布局（创建简单的2列或3列仍然非常容易）

在我看来，手工编码的布局——尽管它们工作得很好——不能很好地扩展，并且当您试图添加额外的布局元素时，通常需要进行重大的重新设计。使用网格框架的布局很容易维护，而且您可以立即启动并运行（适用于各种简单和复杂的布局）。试试看：）

#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;
}