1

我必须 div 不会彼此相邻。左边的菜单一直在下面，我调不出来。我曾尝试使用“top:-...”，但它不起作用！请帮忙！

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li><a href="index.html">Home</a></li>
<li><a href="coding.html">Coding</a></li>
<li><a href="graphics.html">Graphics</a></li>
<li><a href="database.html">Database</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="more.html">More</a></li>
</ul>
</div>
<ul id="quicklinks">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
</ul>
<div id="wrapper">
<div id="midwrap"></div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="sites.html">Useful Sites</a></li>
</ul>
</div>
</body>
</html>

CSS：

 html, body {height: 100%;}

* { height: 100%; }

body{
position:relative;
background:#fffffc;
margin: auto auto;
height:100%;
}

#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}

#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:44px;
}

#headerlinks li{
display:inline;
padding-left:25px;
}

#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}

#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}


#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}

.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-66px;
position:relative;
clear: right;
}

#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}

#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}


#wrapper{
position:relative;
top:-82px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}

#sidelinksleft{
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
margin-left:-25px;
top:15px;
}

#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}

#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
}

#midwrap{
width:70%;
height:90%;
border-left: 1px solid black;
border-right: 1px solid black;
margin-left:300px;
background:black;
top:10px;
position:relative;
overflow: hidden;
}

我没有更多细节，但它说我需要更多，所以我正在输入这个随机段落来制作它，以便我可以发布我的问题。

4

2 回答 2

0

请参阅以下 HTML 代码：

<body>
<div id="header">
<div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li><a href="index.html">Home</a></li>
<li><a href="coding.html">Coding</a></li>
<li><a href="graphics.html">Graphics</a></li>
<li><a href="database.html">Database</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="more.html">More</a></li>
</ul>
</div>
<ul id="quicklinks">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
</ul>
<div id="wrapper">
<div style="float:left;">
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="sites.html">Useful Sites</a></li>
</ul>
</div>
<div id="midwrap"></div>
<div style="clear: both;"></div>
</body>

我创建了一个包含菜单的 div 并使用了 float: left 属性。

于 2013-06-28T02:29:46.537 回答
0

您的左边距（300 像素）和 div 的宽度（70%）对于您的左侧导航来说太大而无法保持原位。默认情况下 div 是一个块元素，在您的情况下，它占据了容器的整个空间，因此，当您浮动左侧导航并从左侧导航中删除 clear 时，也浮动您的 div 以使其与浮动一起出现在分区。并给予clear:rightdiv。

所以修改样式：

#midwrap {
    width:70%;
    height:90%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    margin-left:100px; /*Reducing this to 100px*/
    background:black;
    top:10px;
    position:relative;
    overflow: hidden;
    float:right; /*float right*/
    clear: right; /*add this here*/
}

#sidelinksleft {
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:25px;
    position:relative;
    /*removed clear from here*/
    float:left;
    margin-left:-25px;
    top:15px;
}

演示

于 2013-06-28T02:56:54.660 回答