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.