[英]NavBar & ContentDiv wont sit side-by-side
我有一個非常簡單的 HTML 布局,其中垂直導航欄應該位於內容 div 的左側。 並且兩個元素都應該水平居中。
我已經設置了 CSS 代碼使其布局像這樣,但它沒有按照我上面所說的方式顯示。 它的實際外觀是導航欄位於左側 (x=0) 並且內容 div 位於導航欄下方,也位於絕對左側。
我究竟做錯了什么?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; min-width: 1200px; }
/* ID elements */
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; padding-top: 30px; }
#main { display: inline; }
#navBar { height: 700px; width: 200px; background: url("images/navBackground.png") no-repeat; }
#content { height: 700px; width: 800px; background: url("images/contentBackground.png") no-repeat; }
#navLinks { font: 100%/1.4 'Segoe Print'; font-weight: bold; list-style-type: none; }
#navLinks ul, li, a { color: white; }
/* Classes */
.hidden { display: none; }
.unhidden { display: block; }
-->
</style>
</head>
<body>
<div id="heading">
<img id="headingImg" src="images/logoWritting.png" alt="Kamalei Childrens Centre" width="600px" height="240px"/>
</div>
<div id="main">
<div id="navBar">
</div>
<div id="content">
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/javascript">
<!--
window.onresize = setBackgroundImgWidth;
-->
</script>
</body>
您需要浮動或 position #navBar 和 #content。 我會用浮點數 go :
#navBar { float:left; height: 700px; width: 200px; background: url("images/navBackground.png") no-repeat; }
#content { float:left; height: 700px; width: 800px; background: url("images/contentBackground.png") no-repeat; }
對於居中,您需要對#main 執行以下操作:
#main { display: block; width:1000px; margin:0 auto }
居中通過定義元素的寬度並將“自動”應用於左右邊距來工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.