删除其他元素后元素不会向上移动

时间：2015-08-08 11:51:10

标签： javascript jquery html css

我有这段代码

＆＃13;
＆＃13; 
$(document).ready(function(){
    	$('#deleteGoogle').click(function(){ $('#googleDiv').css('display', 'none'); });
    	$('#deleteYoutube').click(function(){ $('#youtubeDiv').css('display', 'none'); });
    	$('#deleteFacebook').click(function(){ $('#facebookDiv').css('display', 'none'); });
    	$('#deleteTwitter').click(function(){ $('#twitterDiv').css('display', 'none'); });
    	$('#deleteInstagram').click(function(){ $('#instaDiv').css('display', 'none'); });
    	$('#deletePlus').click(function(){ $('#plusDiv').css('display', 'none'); });
    	$('#deleteDrive').click(function(){ $('#driveDiv').css('display', 'none'); });
    	$('#deleteLink').click(function(){ $('#linkDiv').css('display', 'none'); });
    	$('#deleteGit').click(function(){ $('#gitDiv').css('display', 'none'); });
    	$('#deleteSpace').click(function(){ $('#spaceDiv').css('display', 'none'); });
    });
＆＃13; 
#bookmarkMenu {
    	height: 350px;
    	width: 250px;
    	position: absolute;
    	right: 40px;
    	top: 53px;
    	border-radius: 3px;
    	border: 1px rgb(211, 211, 211) solid;
    	background-color: rgb(240, 240, 240);
    	overflow-y: scroll;
    	overflow-x: hidden;
    }
    
    .logos {
    	height: 40px;
    	width: 40px;
    	position: relative;
    	left: 10px;
    	top: 5px;
    }
    
    .bookmarkLinks {
    	font-weight: 500;
    	font-size: 20px;
    	font-family: sans-serif;
    	left: 50px;
    	position: relative;
    	bottom: 45px;
    	width: 70px;
    
    }
    
    .logoIMG {
    	height: 40px;
    	width: 40px;
    }
    
    #lineBookmark {
    	border: 1px rgb(211, 211, 211) solid;
    	width: 249px;
    	position: absolute;
    	top: 1.4cm;
    }
    
    .delete {
    	height: 30px;
    	width: 30px;
    	position: relative;
    	left: 185px;
    	bottom: 90px;
    	cursor: pointer;
    }
    
    a {
    	text-decoration: none;
    }
    
    a:hover {
    	color: black;
    }
    
    a:visited {
    	color: black;
    }
    
    a:link {
    	color: black;
    }
    
    a:active {
    	color: black;
    }
    
    .titles {
    	font-weight: 500;
    	font-size: 1.3em;
    	font-family: sans-serif;
    	text-align: center;
    }
＆＃13; 
<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    </head>
    <body>
    
   
    
    <div id="bookmarkMenu">
    	<h1 class="titles" id="bookmarkWord">Bookmarks</h1>
    	<div id="lineBookmark"></div>
    
    	<a href="http://www.google.com"><div class="logos" id="googleDiv"><img src="googleLogo.png" title="Google" class="logoIMG"><h2 class="bookmarkLinks">Google</h2></a><img src="delete.png" class="delete" id="deleteGoogle"></div><br>
    
    	<a href="http://www.youtube.com"><div class="logos" id="youtubeDiv"><img src="youtubeLogo.png" title="Youtube" class="logoIMG"><h2 class="bookmarkLinks">Youtube</h2></a><img src="delete.png" class="delete" id="deleteYoutube"></div><br>
    
    	<a href="http://www.facebook.com"><div class="logos" id="facebookDiv"><img src="facebookLogo.png" title="Facebook" class="logoIMG"><h2 class="bookmarkLinks">Facebook</h2></a><img src="delete.png" class="delete" id="deleteFacebook"></div><br>
    
    	<a href="http://www.twitter.com"><div class="logos" id="twitterDiv"><img src="twitterLogo.png" title="Twitter" class="logoIMG"><h2 class="bookmarkLinks">Twitter</h2></a><img src="delete.png" class="delete" id="deleteTwitter"></div><br>
    
    	<a href="http://www.instagram.com"><div class="logos" id="instaDiv"><img src="instaLogo.png" title="Instagram" class="logoIMG"><h2 class="bookmarkLinks">Instagram</h2></a><img src="delete.png" class="delete" id="deleteInstagram"></div><br>
    
    	<a href="http://plus.google.com"><div class="logos" id="plusDiv"><img src="g+Logo.png" title="Google+" class="logoIMG"><h2 class="bookmarkLinks">Google+</h2></a><img src="delete.png" class="delete" id="deletePlus"></div><br>
    
    	<a href="http://drive.google.com"><div class="logos" id="driveDiv"><img src="driveLogo.png" title="Google Drive" class="logoIMG"><h2 class="bookmarkLinks">Drive</h2></a><img src="delete.png" class="delete" id="deleteDrive"></div><br>
    
    	<a href="http://www.linkedin.com"><div class="logos" id="linkDiv"><img src="linkLogo.png" title="Linkedin" class="logoIMG"><h2 class="bookmarkLinks">Linkedin</h2></a><img src="delete.png" class="delete" id="deleteLink"></div><br>
    
    	<a href="http://www.github.com"><div class="logos" id="gitDiv"><img src="githubLogo.png" title="Github" class="logoIMG"><h2 class="bookmarkLinks">Github</h2></a><img src="delete.png" class="delete" id="deleteGit"></div><br>
    
    	<a href="http://www.myspace.com"><div class="logos" id="spaceDiv"><img src="myspaceLogo.png" title="Myspace" class="logoIMG"><h2 class="bookmarkLinks">Myspace</h2></a><img src="delete.png" class="delete" id="deleteSpace"></div><br>
    </div>
    
   
   
    
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

问题是，每当我想要删除书签时（通过点击位于书签菜单右侧的图像），删除的书签下面的元素只会向上移动几个像素，并且不会取而代之。我该如何解决这个问题。

1 个答案:

答案 0 :(得分：0)

只需删除您的<br>，然后转到课程“徽标”margin-top。 <br>这是在元素之间建立边距的正确方法！

$(document).ready(function(){
    	$('#deleteGoogle').click(function(){ $('#googleDiv').css('display', 'none'); });
    	$('#deleteYoutube').click(function(){ $('#youtubeDiv').css('display', 'none'); });
    	$('#deleteFacebook').click(function(){ $('#facebookDiv').css('display', 'none'); });
    	$('#deleteTwitter').click(function(){ $('#twitterDiv').css('display', 'none'); });
    	$('#deleteInstagram').click(function(){ $('#instaDiv').css('display', 'none'); });
    	$('#deletePlus').click(function(){ $('#plusDiv').css('display', 'none'); });
    	$('#deleteDrive').click(function(){ $('#driveDiv').css('display', 'none'); });
    	$('#deleteLink').click(function(){ $('#linkDiv').css('display', 'none'); });
    	$('#deleteGit').click(function(){ $('#gitDiv').css('display', 'none'); });
    	$('#deleteSpace').click(function(){ $('#spaceDiv').css('display', 'none'); });
    });
#bookmarkMenu {
    	height: 350px;
    	width: 250px;
    	position: absolute;
    	right: 40px;
    	top: 53px;
    	border-radius: 3px;
    	border: 1px rgb(211, 211, 211) solid;
    	background-color: rgb(240, 240, 240);
    	overflow-y: scroll;
    	overflow-x: hidden;
    }
    
    .logos {
    	height: 40px;
    	width: 40px;
    	position: relative;
    	left: 10px;
    	top: 5px;
        margin-top: 10px;
    }
    
    .bookmarkLinks {
    	font-weight: 500;
    	font-size: 20px;
    	font-family: sans-serif;
    	left: 50px;
    	position: relative;
    	bottom: 45px;
    	width: 70px;
    
    }
    
    .logoIMG {
    	height: 40px;
    	width: 40px;
    }
    
    #lineBookmark {
    	border: 1px rgb(211, 211, 211) solid;
    	width: 249px;
    	position: absolute;
    	top: 1.4cm;
    }
    
    .delete {
    	height: 30px;
    	width: 30px;
    	position: relative;
    	left: 185px;
    	bottom: 90px;
    	cursor: pointer;
    }
    
    a {
    	text-decoration: none;
    }
    
    a:hover {
    	color: black;
    }
    
    a:visited {
    	color: black;
    }
    
    a:link {
    	color: black;
    }
    
    a:active {
    	color: black;
    }
    
    .titles {
    	font-weight: 500;
    	font-size: 1.3em;
    	font-family: sans-serif;
    	text-align: center;
    }
<div id="bookmarkMenu">
    	<h1 class="titles" id="bookmarkWord">Bookmarks</h1>
    	<div id="lineBookmark"></div>
    
    	<a href="http://www.google.com"><div class="logos" id="googleDiv"><img src="googleLogo.png" title="Google" class="logoIMG"><h2 class="bookmarkLinks">Google</h2></a><img src="delete.png" class="delete" id="deleteGoogle"></div>
    
    	<a href="http://www.youtube.com"><div class="logos" id="youtubeDiv"><img src="youtubeLogo.png" title="Youtube" class="logoIMG"><h2 class="bookmarkLinks">Youtube</h2></a><img src="delete.png" class="delete" id="deleteYoutube"></div>
    
    	<a href="http://www.facebook.com"><div class="logos" id="facebookDiv"><img src="facebookLogo.png" title="Facebook" class="logoIMG"><h2 class="bookmarkLinks">Facebook</h2></a><img src="delete.png" class="delete" id="deleteFacebook"></div>
    
    	<a href="http://www.twitter.com"><div class="logos" id="twitterDiv"><img src="twitterLogo.png" title="Twitter" class="logoIMG"><h2 class="bookmarkLinks">Twitter</h2></a><img src="delete.png" class="delete" id="deleteTwitter"></div>
    
    	<a href="http://www.instagram.com"><div class="logos" id="instaDiv"><img src="instaLogo.png" title="Instagram" class="logoIMG"><h2 class="bookmarkLinks">Instagram</h2></a><img src="delete.png" class="delete" id="deleteInstagram"></div>
    
    	<a href="http://plus.google.com"><div class="logos" id="plusDiv"><img src="g+Logo.png" title="Google+" class="logoIMG"><h2 class="bookmarkLinks">Google+</h2></a><img src="delete.png" class="delete" id="deletePlus"></div>
    
    	<a href="http://drive.google.com"><div class="logos" id="driveDiv"><img src="driveLogo.png" title="Google Drive" class="logoIMG"><h2 class="bookmarkLinks">Drive</h2></a><img src="delete.png" class="delete" id="deleteDrive"></div>
    
    	<a href="http://www.linkedin.com"><div class="logos" id="linkDiv"><img src="linkLogo.png" title="Linkedin" class="logoIMG"><h2 class="bookmarkLinks">Linkedin</h2></a><img src="delete.png" class="delete" id="deleteLink"></div>
    
    	<a href="http://www.github.com"><div class="logos" id="gitDiv"><img src="githubLogo.png" title="Github" class="logoIMG"><h2 class="bookmarkLinks">Github</h2></a><img src="delete.png" class="delete" id="deleteGit"></div>
    
    	<a href="http://www.myspace.com"><div class="logos" id="spaceDiv"><img src="myspaceLogo.png" title="Myspace" class="logoIMG"><h2 class="bookmarkLinks">Myspace</h2></a><img src="delete.png" class="delete" id="deleteSpace"></div>
    </div>

相关问题
最新问题