XHTML / CSS 3列Quandry
[英]XHTML/CSS 3 Column Quandry
问题描述
我是编码，XHTML，CSS和PHP领域的新手。 这是我第一次尝试，基于对CSS的最少了解，我将其理解为3列布局。
我感到困惑的是使用overflow: auto以及结构化文档。
例如，我在http://www.icms.info/website-howto/css-tutorial上阅读了该教程，我认为这很麻烦。 因此，我根据自己的知识创建了3列布局。 我更改了内容div标签在页脚div标签上方的位置，而不是显示在导航上方。 因此，我的困惑是
问题1
为什么我必须更改内容div标签的位置（如文章所示，内容div标签位于导航div标签上方）？
<div id="container">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
至
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
问题2
为什么我不能使用声明overflow: auto容器ID选择器中的overflow: auto
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
并不得不诉诸clear: both在页脚选择器中都如此？
整个代码
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
}
#header {
height: 120px;
background-color: gray;
}
#content {
background-color: red;
width: 715px;
text-align: center;
}
#navigation {
background-color: orange;
float: left;
}
#news {
background-color: blue;
float: right;
}
#footer {
background-color: green;
clear: both;
}
</style>
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
编辑
@ Phil.Wheeler这就是我的开始；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
#header {
height: 120px;
background-color: gray;
}
#content {
background-color: red;
width: 715px;
text-align: center;
}
#navigation {
background-color: orange;
float: left;
}
#news {
background-color: blue;
float: right;
}
#footer {
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="navigation">
navigation
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
</body>
2 个解决方案
解决方案1
0 2011-05-12 11:23:42
问题1
具有尽可能高的导航效果对SEO更好。
问题2
对所有元素使用overflow：auto，而实际上您想让它们自动溢出。 无论如何，溢满可能是一个坏主意：自动，因为在内容部分中具有滚动条的网站例如对移动设备不利。 您可能要避免这种情况（或至少在移动设备访问您的网站时进行不同的布局）
您可能要使用这种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charsetUTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="web.css" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
font-family: arial, sans-serif;
font-size: medium;
}
#container {
width: 750px;
margin: 0px auto;
border: 1px dashed #000000;
overflow: auto;
}
#header {
height: 120px;
background-color: gray;
}
#content {
width: 390px;
background-color: red;
float: left;
display: block;
}
#navigation {
width: 180px;
background-color: orange;
float: left;
display: block;
}
#news {
width: 180px;
background-color: blue;
float: left;
display: block;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="navigation">
navigation
</div>
<div id="content">
content
</div>
<div id="news">
news
</div>
<div id="footer">
footer
</div>
</div>
</body>
解决方案2
0 已采纳 2011-05-13 01:58:13
正如您在开头的句子中所指出的那样，您是编码的新手，因此开始时一些HTML / CSS结构规则似乎有点违反直觉。
我会首先回答您的第二个问题，因为这是最直接的问题。 “ overflow”属性的使用向浏览器指示如何呈现超出其所包含元素边界的任何内容。例如，如果您有一个<div>元素高为100像素，但是您的内容是一段超过100像素的完整段落：
-
overflow: visible将显示所有内容，这些内容会溢出div边界。 -
overflow: hidden将扩大div的大小以包含所有内容（只要没有其他父规则阻止或覆盖此行为）。 -
overflow: scroll将显示滚动条，以便用户可以在div上下滚动（或左右滚动）。 -
overflow: auto仅当内容超过其固定大小时，overflow: auto才会向div添加滚动条。
关于三列布局，您会发现稍微更改CSS规则并稍加修改HTML结构将使工作变得更加轻松，而不必依赖样式中的overflow或clear属性。 我假设您的专栏是内容，导航和新闻。
看一下这个例子：
<div class="leftCol">
<h2>Left Column</h2>
<p>Left column is 250px by default. It can be extended by applying other classes.</p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="rightCol">
<h2>Right Column</h2>
<p>The right column is by default 300px wide. It can be extended by applying other classes.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</div>
<div class="main">
<h2>Main Content</h2>
<p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
</div>
注意，我按以下顺序放置了浮动列：左，右，主要。 我的主列只占用了两侧列之间剩余的空间。 这是要做的CSS：
.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
.main{display:table-cell;*display:block;width:auto;}
我不需要使用溢出或清除来实现此目的，并且在我将这三个元素放入的任何容器中，一切都布置得很好。
希望这可以帮助。
如何在不使用CSS的xhtml中创建2列布局
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.