当左div向下滑动时，右div被推到其下方。 如何使他们留在正确的地方？

Question

我有一个从屏幕顶部向下滑动的菜单。 此菜单具有2个按钮，单击这些按钮可从顶部菜单的底部向下滑动其自己的菜单。

我遇到的问题是单击右键时，其下拉菜单将左下拉菜单推到正确位置以下。 如图所示，这在主下拉菜单和右下拉菜单之间产生了间隙。

我相信这里的问题可能与菜单向下滑动时显示属性从无到有有关。 但是，我尝试将两个下拉菜单都设置为inline-block无济于事。

我很难让它在JSFiddle中运行作为示例，但是它在本地运行得很好。

有谁知道如何将左右下拉菜单设置为正确的高度（附在主下拉菜单的底部）？

这是我的代码：

 (function($) { $(document).ready(function() { $('.selector').click(function() { $('.dropDown').slideToggle(300); $('#dropArrow').toggleClass('glyphicon-arrow-up glyphicon-arrow-down'); }); $("#infoButton").click(function() { $('#infoDiv').slideToggle(300); }); $("#searchButton").click(function() { $('#searchDiv').slideToggle(300); }); }); })(jQuery); 

 body { margin: 0; padding: 0; } .dropDown { padding: 10px; background: black; display: none; position: relative; width: 70%; height: 70px; margin: 0 auto; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; color: white; box-shadow: 2px 2px 10px rgb(51, 51, 51); clear: both; z-index: 100; } .selector { text-align: center; position: absolute; transform: scaleX(1.5); padding: 4px; left: 49%; background-image: -moz-linear-gradient(center top, rgb(219, 79, 0), rgb(255, 185, 95)); box-shadow: 2px 2px 10px rgb(51, 51, 51); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; cursor: pointer; width: 24px; height: 24px; color: white; z-index: 100; } #leftDrop { float: left; text-align: center; width: 33%; margin-top: 20px; } #rightDrop { float: right; text-align: center; width: 33%; margin-top: 20px; } #centerDrop { margin: 0 auto; text-align: center; width: 33%; } .dropButtonLeft { transform: scale(1.6, 1.6); padding: 8px; margin-left: 25px; margin-top: -6px; float: left; cursor: pointer; } .dropButtonRight { transform: scale(1.6, 1.6); padding: 8px; margin-right: 25px; margin-top: -6px; float: right; cursor: pointer; } #infoDiv { padding: 10px; background-color: rgba(34, 34, 34, 0.8); display: none; position: relative; width: 20%; height: 18%; margin-left: 16%; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; color: white; box-shadow: 2px 2px 10px rgb(51, 51, 51); clear: both; z-index: 100; text-align: center; padding-left: 1%; } #searchDiv { padding: 10px; background-color: rgba(34, 34, 34, 0.8); display: none; position: relative; width: 20%; height: 18%; margin-left: 64%; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; color: white; box-shadow: 2px 2px 10px rgb(51, 51, 51); clear: both; z-index: 100; text-align: center; padding-left: 1%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='dropDown'> <div id='leftDrop'> <span id="infoButton" class="glyphicon glyphicon-info-sign dropButtonLeft" aria-hidden="true"></span> </div> <div id='rightDrop'> <span id="searchButton" class="glyphicon glyphicon-search dropButtonRight" aria-hidden="true"></span> </div> <div id='centerDrop'> Main Dropdown </div> </div> <div class='selector'> <span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> </div> <div id="infoDiv"> Left Dropdown </div> <div id="searchDiv"> Right Dropdown </div> 

Answer 1

编织： http : //kodeweave.sourceforge.net/editor/#e0f8383b4f7e089f87b6784edb952540

这只是我在复制图像中看到的内容的尝试。 这就是为什么我不使用position absolute原因。

对于侧面按钮（左/右下拉列表），我仅使用边距将它们对齐到需要的位置。 记住干 ！

编辑：
这是我的Plunk叉子 ： https : //plnkr.co/edit/QlwPPdPWfYJEQJq2PvZx ? p = preview

当左键的可见性更改时，右键向下移动的原因是因为默认情况下div元素是display block

意味着它将始终以换行形式出现（如段落）。

因此，首先您需要将其封装在新的div中（这将处理它的主要位置）

然后告诉左div向左float left告诉右向右float right

 $(".togglemain").click(function() { $(this).find(".fa").toggleClass("fa-arrow-up fa-arrow-down") }) 

 body { text-align: center; } /* Main Dropdown */ .maindrop, .leftdrop, .rightdrop { padding: 1em; background: #000; color: #fff; border-radius: 0 0 20px 20px; transition: all .2s linear; } .circletxt { margin: -0.16em; padding: 0.2193408em 0.48576em; background: #fff; color: #000; border-radius: 25em; } /* Toggle Dropdown */ .togglemain { position: relative; top: 0.68em; padding: 0.68em 1em; background: #d6a12d; color: #fff; border-radius: 0 0 20px 20px; } /* Left & Right Dropdowns */ .leftdrop, .rightdrop { width: 165px; background: #292929; } .leftdrop { margin: -20px 1.12em; width: 165px; } .rightdrop { margin: -18px 1.12em; float: right; width: 165px; } /* Click Events */ .maindrop { height: 0; padding: 0; overflow: hidden; } .leftdrop, .rightdrop { height: 0; padding: 0 1em; overflow: hidden; } #maindrop:checked ~ .maindrop { height: auto; padding: 1em; overflow: visible; } #leftdrop:checked ~ .leftdrop { height: auto; padding: 1em; overflow: visible; } #rightdrop:checked ~ .rightdrop { height: auto; padding: 1em; overflow: visible; } /* varaible classes */ .pointer { cursor: pointer; } .fl { float: left; } .fn { float: none; } .fr { float: right; } .hide { display: none; } 

 <link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" id="maindrop" class="hide"> <div class="maindrop mainmove"> Main Dropdown <label for="leftdrop" class="fl pointer circletxt fa fa-info"></label> <label for="rightdrop" class="fr pointer fa fa-search"></label> </div> <label class="togglemain mainmove pointer" for="maindrop"> <span class="fa fa-arrow-down"></span> </label> <div class="wrap mainmove"> <input type="checkbox" id="leftdrop" class="hide"> <input type="checkbox" id="rightdrop" class="hide"> <div class="fl pointer leftdrop"> Left Dropdown </div> <div class="fr pointer rightdrop"> Right Dropdown </div> </div> 

Answer 2

Chrome检查器提供的快速gif：

一些技巧...

• 蓝色是元素
• 绿色是填充物
• 橙色是保证金

---

这是怎么回事？

每个元素都占据了它所在的整个“行”，因为它们是块元素。 有几件事可以改变这种行为，即使用CSS Floats 。

---

在您的#infoDiv ，您应该：

• 清除clear: both
• 添加float: left

在#searchDiv ，您应该：

• 删除margin-left: 64%
• 清除clear: both
• 添加float: right
• 添加margin-right: 16% （以匹配margin-left: 16% #infoDiv上的margin-left: 16% ）

将先前的检查器与新的检查器进行比较：