html div定位答案

【问题标题】：Html Div positioninghtml div定位
【发布时间】：2013-07-14 14:50:56
【问题描述】：

我试图在这些 div 上获得正确的定位，我希望横幅 div 是页面的一半并且位于页面的右侧，以便它覆盖与容器相同的水平空间，并且让菜单栏 div 左对齐。

HTML：

 <html>
    <head>
    <meta content="en-gb" http-equiv="Content-Language">
    <title>hhhh</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    </style>
    </head>
    <body>

    <div id="bannerdiv" title="Banner" align="center">

        <img alt="logo" height="63" src="images/Logo.gif" width="126"></div>


    <div id="container">
    <h2 class="auto-style2">tgfdgfdgfghgfhgfh</h2>

        </div>

    <div id="menubar" title="menu" style="width: 13%">
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </div>
    <div id="mainpage" class="auto-style1" style="height: 96px; width: 82%">


    </div>


    </body>
    </html>

CSS：

#container {
    background-color: #008852;
    font-family: Arial;
    color: #FFFFFF;
    text-align: center;
    margin-top: 10px;
}

#menubar

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
a:link, a:visited {
    display:block;
    font-weight:bold;
    color:#000000;
    background-color:#EFF1EB;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    border-style: solid;
    border-color: #638529;
    font-family: Arial, Helvetica, sans-serif;
    border-top-width: 1px;
}
a:hover, a:active {
    background-color:#7A991A;
}
#mainpage {
    width:50%;
    float:left;
    background-color: #EDEFEE;
}
#menubar {
    font-size: xx-small;
    width:50%;
    float:left;
}

【问题讨论】：

标签： css html layout

【解决方案1】：

 <div id="mainpage" class="auto-style1" style="height: 96px; width:   82%;float:right;height:50%;">

【讨论】：

为什么是问号？这是一个问题/评论吗？或者这是一个答案？
这是一个奇怪的答案，因为我相信它回答了这个问题，但我不能 100% 确定问题是什么！

【解决方案2】：

你所有的样式都应该通过css来完成，而不是通过样式、宽度、高度等

<div class="container">
  <div id="banner">
    <img src="image"/>
  </div>
<div id="nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</div>
<div id="main-content">
  <h2>title</h2>
  <p>main content</p>
</div>

你的 CSS 就是

#container{
    width:960px;
}
#nav{
    width:240px;
    float:left;
}
#main-content{
    width:720px;
    float:left;
}

我建议watching the series at nettuts 了解 html 和 css，以了解使用 css 的正确方法。祝你好运

【讨论】：