如何阻止一个div移动另一个div，但仍保持它们垂直对齐？

Question

Here is the codepen: http://codepen.io/anon/pen/WbYjOW

When you add an interest in the right box (thus causing the right div to grow), the dropdown list moves with it, at least in Firefox and Chrome.

How can this unwanted movement be prevented?

Here is the code pasted (same as codepen):

HTML

  /*Adder*/ $(document).ready(function() { var i = 0; for (i = 0; i < localStorage.length; i++) { var taskID = "task-" + i; $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>"); } $('#clear').click(function() { localStorage.clear(); }); $('#taskEntryForm').submit(function() { if ($('#taskInput').val() !== "") { var taskID = "task-" + i; var taskMessage = $('#taskInput').val(); localStorage.setItem(taskID, taskMessage); $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>"); var task = $('#' + taskID); task.css('display', 'none'); task.slideDown(); $('#taskInput').val(""); i++; } return false; }); $('#taskList').on("click", "li", function(event) { self = $(this); taskID = self.attr('id'); localStorage.removeItem(taskID); self.slideUp('slow', function() { self.remove(); }); }); }); /*EasyDropDown*/ /* * EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus * Version: 2.0.4 * License: Creative Commons Attribution 3.0 Unported - CC BY 3.0 * http://creativecommons.org/licenses/by/3.0/ * This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder. * Author: Patrick Kunka * Copyright 2013 Patrick Kunka, All Rights Reserved */ (function(d) { function e() { this.isField = !0; this.keyboardMode = this.hasLabel = this.cutOff = this.inFocus = this.down = !1; this.nativeTouch = !0; this.wrapperClass = "dropdown"; this.onSelect = null } function f(a, c) { var b = new e; b.init(a, c); b.instances.push(b) } e.prototype = { constructor: e, instances: [], init: function(a, c) { var b = this; d.extend(b, c); b.$select = d(a); b.options = []; b.$options = b.$select.find("option"); b.isTouch = "ontouchend" in document; b.$select.removeClass(b.wrapperClass + " dropdown"); b.$options.length && (b.$options.each(function(a) { var c = d(this); c.is(":selected") && (b.selected = { index: a, title: c.text() }, b.focusIndex = a); c.hasClass("label") && 0 == a ? (b.hasLabel = !0, b.label = c.text(), c.attr("value", "")) : b.options.push({ domNode: c[0], title: c.text(), value: c.val(), selected: c.is(":selected") }) }), b.selected || (b.selected = { index: 0, title: b.$options.eq(0).text() }, b.focusIndex = 0), b.render()) }, render: function() { var a = this; a.$container = a.$select.wrap('<div class="' + a.wrapperClass + (a.isTouch && a.nativeTouch ? " touch" : "") + '"><span class="old"/></div>').parent().parent(); a.$active = d('<span class="selected">' + a.selected.title + "</span>").appendTo(a.$container); a.$carat = d('<span class="carat"/>').appendTo(a.$container); a.$scrollWrapper = d("<div><ul/></div>").appendTo(a.$container); a.$dropDown = a.$scrollWrapper.find("ul"); a.$form = a.$container.closest("form"); d.each(a.options, function() { a.$dropDown.append("<li" + (this.selected ? ' class="active"' : "") + ">" + this.title + "</li>") }); a.$items = a.$dropDown.find("li"); a.maxHeight = 0; a.cutOff && a.$items.length > a.cutOff && a.$container.addClass("scrollable"); for (i = 0; i < a.$items.length; i++) { var c = a.$items.eq(i); a.maxHeight += c.outerHeight(); if (a.cutOff == i + 1) break } a.isTouch && a.nativeTouch ? a.bindTouchHandlers() : a.bindHandlers() }, bindTouchHandlers: function() { var a = this; a.$container.on("click", function() { a.$select.focus() }); a.$select.on({ change: function() { var c = d(this).find("option:selected"), b = c.text(), c = c.val(); a.$active.text(b); "function" == typeof a.onSelect && a.onSelect.call(a, { title: b, value: c }) }, focus: function() { a.$container.addClass("focus") }, blur: function() { a.$container.removeClass("focus") } }) }, bindHandlers: function() { var a = this; a.query = ""; a.$container.on({ click: function() { a.down ? a.close() : a.open() }, mousemove: function() { a.keyboardMode && (a.keyboardMode = !1) } }); d("body").on("click", function(c) { c = d(c.target); var b = a.wrapperClass.split(" ").join("."); !c.closest("." + b).length && a.down && a.close() }); a.$items.on({ click: function() { var c = d(this).index(); a.select(c); a.$select.focus() }, mouseover: function() { if (!a.keyboardMode) { var c = d(this); c.addClass("focus").siblings().removeClass("focus"); a.focusIndex = c.index() } }, mouseout: function() { a.keyboardMode || d(this).removeClass("focus") } }); a.$select.on({ focus: function() { a.$container.addClass("focus"); a.inFocus = !0 }, blur: function() { a.$container.removeClass("focus"); a.inFocus = !1 } }); a.$dropDown.on("scroll", function(c) { a.$dropDown[0].scrollTop == a.$dropDown[0].scrollHeight - a.maxHeight ? a.$container.addClass("bottom") : a.$container.removeClass("bottom") }); a.$select.on("keydown", function(c) { if (a.inFocus) { a.keyboardMode = !0; var b = c.keyCode; if (38 == b || 40 == b || 32 == b) c.preventDefault(), 38 == b ? (a.focusIndex--, a.focusIndex = 0 > a.focusIndex ? a.$items.length - 1 : a.focusIndex) : 40 == b && (a.focusIndex++, a.focusIndex = a.focusIndex > a.$items.length - 1 ? 0 : a.focusIndex), a.down || a.open(), a.$items.removeClass("focus").eq(a.focusIndex).addClass("focus"), a.cutOff && a.scrollToView(), a.query = ""; if (a.down) if (9 == b || 27 == b) a.close(); else { if (13 == b) return c.preventDefault(), a.select(a.focusIndex), a.close(), !1; if (8 == b) return c.preventDefault(), a.query = a.query.slice(0, -1), a.search(), !1; 38 != b && 40 != b && (c = String.fromCharCode(b), a.query += c, a.search()) } } }); if (a.$form.length) a.$form.on("reset", function() { a.$active.text(a.hasLabel ? a.label : "") }) }, open: function() { var a = window.scrollY || document.documentElement.scrollTop, c = window.scrollX || document.documentElement.scrollLeft, b = this.notInViewport(a); this.closeAll(); this.$select.focus(); window.scrollTo(c, a + b); this.$container.addClass("open"); this.$scrollWrapper.css("height", this.maxHeight + "px"); this.down = !0 }, close: function() { this.$container.removeClass("open"); this.$scrollWrapper.css("height", "0px"); this.focusIndex = this.selected.index; this.query = ""; this.down = !1 }, closeAll: function() { var a = Object.getPrototypeOf(this).instances; for (i = 0; i < a.length; i++) a[i].close() }, select: function(a) { var c = this.options[a], b = this.hasLabel ? a + 1 : a; this.$items.removeClass("active").eq(a).addClass("active"); this.$active.text(c.title); this.$select.find("option").prop("selected", !1).eq(b).prop("selected", "selected"); this.selected = { index: a, title: c.title }; this.focusIndex = i; "function" == typeof this.onSelect && this.onSelect.call(this, { title: c.title, value: c.value }) }, search: function() { for (i = 0; i < this.options.length; i++) if (-1 != this.options[i].title.toUpperCase().indexOf(this.query)) { this.focusIndex = i; this.$items.removeClass("focus").eq(this.focusIndex).addClass("focus"); this.scrollToView(); break } }, scrollToView: function() { if (this.focusIndex >= this.cutOff) { var a = this.$items.eq(this.focusIndex).outerHeight() * (this.focusIndex + 1) - this.maxHeight; this.$dropDown.scrollTop(a) } }, notInViewport: function(a) { var c = a + (window.innerHeight || document.documentElement.clientHeight), b = this.$dropDown.offset().top + this.maxHeight; return b >= a && b <= c ? 0 : b - c + 5 } }; d.fn.easyDropDown = function(a) { return this.each(function() { f(this, a) }) }; d(function() { "function" !== typeof Object.getPrototypeOf && (Object.getPrototypeOf = "object" === typeof "test".__proto__ ? function(a) { return a.__proto__ } : function(a) { return a.constructor.prototype }); d(".dropdown").each(function() { var a = d(this).attr("data-settings"); settings = a ? d.parseJSON(a) : {}; f(this, settings) }) }) })(jQuery); 

  /*adder*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600); * { padding: 0; margin: 0; } body { background: url(''); background-color: #2a2a2a; font-family: 'Open Sans', sans-serif; } .adder #container { background-color: #111216; color: #999999; width: 350px; /*margin: 50px auto auto auto;*/ padding-bottom: 12px; } .adder #formContainer { padding-top: 12px; } .adder #taskIOSection {} .adder #taskInput { font-size: 14px; font-family: 'Open Sans', sans-serif; height: 36px; width: 311px; border-radius: 100px; background-color: #202023; border: 0; color: #fff; display: block; padding-left: 15px; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } .adder #taskInput:focus { box-shadow: 0px 0px 1pt 1pt #999999; background-color: #111216; outline: none; } .adder::-webkit-input-placeholder { color: #333333; font-style: italic; /* padding-left:10px; */ } .adder:-moz-placeholder { /* Firefox 18- */ color: #333333; font-style: italic; } .adder::-moz-placeholder { /* Firefox 19+ */ color: #333333; font-style: italic; } .adder:-ms-input-placeholder { color: #333333; font-style: italic; } .adder header { margin-top: 0; background-color: #F94D50; width: 338px; height: 48px; padding-left: 12px; } .adder header h1 { font-size: 25px; font-weight: 300; color: #fff; line-height: 48px; width: 50%; display: inline; } .adder header a { width: 40%; display: inline; line-height: 48px; } .adder #taskEntryForm { background-color: #111216; width: 326px; height: 48px; border-width: 0px; padding: 0px 12px 0px 12px; font-size: 0px; } .adder #taskList { width: 350px; margin: auto; font-size: 16px; font-weight: 600; text-align: left; } .adder ul li { background-color: #17181D; height: 48px; width: 314px; padding-left: 12px; margin: 0 auto 10px auto; line-height: 48px; list-style: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*now this*/ /* reset */ ul { margin: 0; padding: 0; } /* --- EASYDROPDOWN DEFAULT THEME --- */ /* PREFIXED CSS */ .dropdown, .dropdown div, .dropdown li, .dropdown div::after { -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .dropdown .selected::after, .dropdown.scrollable div::after { -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; pointer-events: none; } /* WRAPPER */ .dropdown { /*margin: 50px auto auto auto;*/ position: relative; width: 160px; border: 1px solid #ccc; cursor: pointer; background: #fff; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dropdown.open { z-index: 2; } .dropdown:hover { box-shadow: 0 0 5px rgba(0, 0, 0, .15); } .dropdown.focus { box-shadow: 0 0 5px rgba(51, 102, 248, .4); } /* CARAT */ .dropdown .carat { position: absolute; right: 12px; top: 50%; margin-top: -4px; border: 6px solid transparent; border-top: 8px solid #000; } .dropdown.open .carat { margin-top: -10px; border-top: 6px solid transparent; border-bottom: 8px solid #000; } /* OLD SELECT (HIDDEN) */ .dropdown .old { position: absolute; left: 0; top: 0; height: 0; width: 0; overflow: hidden; } .dropdown select { position: absolute; left: 0px; top: 0px; } .dropdown.touch .old { width: 100%; height: 100%; } .dropdown.touch select { width: 100%; height: 100%; opacity: 0; } /* SELECTED FEEDBACK ITEM */ .dropdown .selected, .dropdown li { display: block; font-size: 18px; line-height: 1; color: #000; padding: 9px 12px; overflow: hidden; white-space: nowrap; } .dropdown .selected::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; border-radius: 0 2px 2px 0; box-shadow: inset -55px 0 25px -20px #fff; } /* DROP DOWN WRAPPER */ .dropdown div { position: absolute; height: 0; left: -1px; right: -1px; top: 100%; margin-top: -1px; background: #fff; border: 1px solid #ccc; border-top: 1px solid #eee; border-radius: 0 0 3px 3px; overflow: hidden; opacity: 0; } /* Height is adjusted by JS on open */ .dropdown.open div { opacity: 1; z-index: 2; } /* FADE OVERLAY FOR SCROLLING LISTS */ .dropdown.scrollable div::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; box-shadow: inset 0 -50px 30px -35px #fff; } .dropdown.scrollable.bottom div::after { opacity: 0; } /* DROP DOWN LIST */ .dropdown ul { /*position: absolute; left: 0; top: 0;*/ height: 100%; width: 100%; list-style: none; overflow: hidden; } .dropdown.scrollable.open ul { overflow-y: auto; } /* DROP DOWN LIST ITEMS */ .dropdown li { list-style: none; padding: 8px 12px; } /* .focus class is also added on hover */ .dropdown li.focus { background: #d24a67; position: relative; z-index: 3; color: #fff; } .dropdown li.active { font-weight: 700; } /*Vertical*/ .wrap { text-align: center; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100px; display: block; } div div { display: inline-block; } 

 <!DOCTYPE html> <!-- --> <html lang="en"> <head> <link type="text/css" rel="stylesheet" href="css/styletime.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/init.js"></script> </head> <body> Hello? <div class="wrap"> <div> <select name="" id="" class="dropdown" style="display:inline-block;"> <option class="label">Label</option> <option value="1">option 1</option> <option value="1">option 2</option> <option value="1">option 3</option> <option value="1">option 4</option> <option value="1">option 5</option> <option value="1">option 6</option> <option value="1">option 7</option> <option value="1">option 8</option> <option value="1">option 9</option> </select> </div> <div class="adder" style="display:inline-block;"> <div id="container"> <section id="taskIOSection"> <div id="formContainer"> <form id="taskEntryForm"> <input id="taskInput" placeholder="Add your interests here..." /> </form> </div> <ul id="taskList"></ul> </section> </div> </div> </div> </body> </html> 

Answer 1

将vertical-align设置为top到.dropdown包装器，例如这里