我是编码和CSS的新手，我正在尝试创建一个包含2列和多行类似于表的页面，但不确定这是否是实现结果的正确方法。
备注
在将其复制到外部样式表之前，我使用的是内部样式表。
我只是将列名为leftnav和leftnav1以及content和content1。我知道这些名称并不理想，但我试图确定编写页面的最佳方法，而不是担心目前的命名约定。
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#backdrop {
background-color: #000000;
width: 100%;
height: 10px;
}
#wrapper {
/* background-color: gray; */
width: 960px;
margin: 0px auto;
margin-top: 100px;
}
#logo {
float: left;
background-color: #E0EEEE;
margin-bottom: 10px;
}
#topnav {
float: right;
margin-right: 180px;
margin-bottom: 10px;
/* background-color: #C1CDCD; */
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#innerwrapper {
clear: both;
width: 800px;
margin: 0px auto;
}
#header {
background-color: #000000;
width: 700px;
height: 200px;
}
#innerhead {
color: #ffffff;
padding: 50px;
}
#leftnav {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
#leftnav1 {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content1 {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
</style>
</head>
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div id="leftnav">About</div>
<div id="content">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="leftnav1">About</div>
<div id="content1">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
</html>
答案 0 :(得分：2)
要将您的页面划分为多个列，您最好花一些时间学习网格CSS框架，例如960，Blueprint或OOCSS。
如果您将页面（或页面的某些部分，如果需要）划分为所需的列数，则可以将每列分成固定高度或可变高度的行。
虽然你想要自己解决这个问题很高尚，但我建议你“对编码世界不熟悉”，你可能会从查看这个已知设计问题的现有例子和解决方案中获益更多从一开始就采用最佳实践方法。
修改
好的，所以鉴于我们坚持使用我们所拥有的东西，让我们看一下清理样式的方法。
您在两个地方声明完全相同的样式：Leftnav和Leftnav1最好更改为：
.leftnav { float: left; margin-top: 10px; width: 200px; }
然后，您可以将该类应用于左侧导航容器。您的content和content1样式也是如此。
要回答你原来的问题，“这是正确的做法吗”，我会说，“严格来说，不是不是。但这样做单程。
更好的方法可能是使用以下内容：
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
然后你的三个必备风格变为：
.leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }