Html div拒绝彼此相邻_Html_Css

Html div拒绝彼此相邻

html css

Html div拒绝彼此相邻,html,css,Html,Css,我得去一个不会挨着的酒馆。左边的菜单一直在下面，我无法打开。我尝试过使用“top:-…”但它不起作用！请帮忙 HTML: 我没有更多的细节，但它说我需要更多，所以我随机键入这段文字，以便发布我的问题。请参阅以下HTML代码： <body> <div id="header"> <div id="logo"><a class="logoclass" href="index.html">DesignAtEase.com</a></div

我得去一个不会挨着的酒馆。左边的菜单一直在下面，我无法打开。我尝试过使用“top:-…”但它不起作用！请帮忙

HTML:

我没有更多的细节，但它说我需要更多，所以我随机键入这段文字，以便发布我的问题。

请参阅以下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属性

您的左侧边距（300px）和div宽度（70%）太大，您的左侧导航无法保持原位。默认情况下，div是一个块元素，在您的例子中，它占据了容器的整个空间，因此在浮动左导航时也浮动div，并从左导航中移除clear，使其与div之前显示的浮动一起放置。并在div上给出

clear:right

因此，修改样式：

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

我们在这里谈论的是哪两个div？我根据代码做了一个标记。那么你想要标题链接和快速链接并排吗？侧边菜单和黑框“middrap”“sidelinksleft”

<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>

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