如何使div停止相互重叠

Question

I got two main divs in my page: the first one contains an accordion menu and the second one, the main text of the page. 我的页面上有两个主要的div：第一个包含手风琴菜单，第二个包含页面的主要文本。 When I resize the browser window, both divs overlap each other , like in this picture: 调整浏览器窗口大小时， 两个div相互重叠 ，如下图所示：

How can I make that stop? 我该如何停止？ I searched a lot to find an answer, but nothing worked. 我进行了很多搜索以找到答案，但是没有任何效果。 I tried to add overflow: auto; 我试图添加overflow: auto; , float: left , I played with the margin... Without success. ， float: left ，我打了保证金...没有成功。

Here is my code: 这是我的代码：

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }

 body#help { font-size: 3vmin; /*Background*/ background: #444444; /* For browsers that [are shit enough to] do not support gradients */ background: -webkit-linear-gradient(#1a8cff, #4da6ff); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#1a8cff, #4da6ff); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#1a8cff, #4da6ff); /* For Firefox 3.6 to 15 */ background: linear-gradient(#1a8cff, #4da6ff); /* Standard syntax */ background-size: contain; background-position: center center; background-repeat: no-repeat; } .panel { background-color: #666666; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; width:250px; } #helpMenuDiv { display: inline-block; position: fixed; top:0px; bottom: auto; right: auto; left: 0px; width: 270px; height: 840px; order: solid 2px black; overflow: auto; } .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 250px; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .accordion.active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .accordion.active:after { content: "\\2212"; } #helpPageDiv { width: 800px; max-width: 800px; border: solid 2px black; margin: auto; }

 <!DOCTYPE html> <html id="helpHtml"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style/style.css"> </head> <body id="help"> <!---Introduction---> <div id="helpPageDiv"> <p>Content of the first div (main text)</p> </div> <!---Accordion---> <div id="helpMenuDiv"> <button class="accordion">Section 1</button> <div class="panel"> <p class="panelText">Content of the accordion</p> </div> <!---More accordions---> <script src="scripts/accordion.js"></script> </body> </html>

Thanks in advance for your answers! 预先感谢您的回答！

Answer 1

I have two suggestions. 我有两个建议。

You can give your helpPageDiv a left margin equal to the width of helpMenuDiv using Jquery that changed with window resize. 您可以使用随窗口调整大小而改变的Jquery，将helpPageDiv的左边距设置为等于helpMenuDiv的宽度。

Try giving width to both helpMenuDiv and helpPageDiv and make them float left. 尝试为helpMenuDiv和helpPageDiv提供宽度，并使它们向左浮动。 Also you can put your menu above the content div in small screens. 您也可以在小屏幕上将菜单放在内容div上方。

Here's I created a simple example that might be useful to you. 这是我创建的一个简单示例，可能对您有用。 >>> JSFiddle . >>> JSFiddle 。 Try resizing the result window too. 也尝试调整结果窗口的大小。

 $('.menu .menu-item h3').click(function() { $(this).siblings('p').slideToggle(); });

 .holder:after{ content: ''; display: block; clear: both; } .menu { width: 20%; float: left; background: #64c1be; } .content { width: 80%; height: 200px; float: left; background: #73c379; } .content .inner{ color: #4d4d4d; border: 1px solid green; margin: 5px; padding: 5px; } .menu .menu-item { background: #ddd; margin: 10px 0; } .menu .menu-item h3 { background: #ccc; margin: 0; cursor: pointer; } .menu .menu-item p { margin: 0; padding: 5px 3px; display: none; } @media (max-width: 550px){ .menu, .content{ width: 100%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="holder"> <div class="menu"> Accordian menu <div class="menu-item"> <h3> + Section 1 </h3> <p> Menu content </p> </div> <div class="menu-item"> <h3> + Section 2 </h3> <p> Text Text </p> </div> <div class="menu-item"> <h3> + Section 3 </h3> <p> faucibus orci </p> </div> <div class="menu-item"> <h3> + Section 4 </h3> <p> ullamcorper </p> </div> </div> <div class="content"> Content goes here <div class="inner"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. </div> </div> </div>

如何使div停止相互重叠

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-06 08:36:01

如何使div停止相互重叠

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-06 08:36:01

解决方案1
0 已采纳 2017-11-06 08:36:01