Question

我试图在这些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;
}

Answer 1

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

Answer 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;
}

我建议{h}和css watching the series at nettuts来了解使用css的正确方法。祝你好运

Html Div定位

2 个答案: