-4

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

2 回答 2

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

?

于 2013-07-16T12:32:51.600 回答
0

您的所有样式都应该通过 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;
}

我建议在 nettuts 上观看有关 html 和 css 的系列文章，以了解使用 css 的正确方法。祝你好运

于 2013-07-16T14:12:33.600 回答