Question

< 我的问题是，当我使用“返回顶部”按钮执行任何操作时，它会使“底部” div混乱。添加“返回顶部”按钮后，它会将底部的div拧紧。我试图涉足“底层” div本身，但是，没有运气。我如何能够让底部居中放置？

.imagen {
padding-top:200px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 350px;
	height:auto;
	}
	body {
	margin:0;
	}

	#menulist {
	list-style-type: none;
	margin:0 auto;
	width:900px;
	padding-top:20px;
	padding-bottom:100px;
	}
	
	.linkactive {
	
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
	width: 190px;
	text-align: center;
	float: left;
	padding: 10px;
	background-color: white;
	color: black;
	}
	
	.link {
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
    width: 190px;
	text-align: center;
	float: left;
	padding: 10px;
	}
	
	.link:hover {
	cursor: pointer;
	color: grey;
	}
	.section1 {
	margin:0 auto;
	width:900px;
	text-align:center;
	font-weight: 1;
	}
	#reflection{

margin: 0 auto;
width:900px;
}



.bottom{
margin-top:100px;
width:100%;
height:200px;
background-color:#fffef9;
}

.section6{

margin: 0 auto;
width:900px;
}
#text6{
padding-top:100px;
font-weight: 1000;
font-family: 'Poiret One', cursive;
text-transform:uppercase;
text-align:center;
font-size:15px;
color:black;
letter-spacing: 5px;
}
#btt{
margin-top:100px;
margin-bottom:100px;
margin: 0 auto;
width:900px;
}
	a {
	text-transform: uppercase;
	font-weight: 1000;
	font-family: 'Poiret One', cursive;
	font-size: 30px;
    width: 190px;
	text-align: center;
	float: left;
	
	color:black;
	text-decoration:none;
	}
	
	a:hover {
	cursor: pointer;
	color: grey;
	}

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Molle:400i" rel="stylesheet">


<body>

 <img class=imagen src='closed.jpg' onmouseover="this.src='open.jpg';" onmouseout="this.src='closed.jpg';" />

<div id="menubar">
     <ul id="menulist">
		
		
		<li class="link" onclick="reStyle(0)"><a href="Joseph Kwong resume.html">about</a></li>
		
         <li class="link" onclick="reStyle(1)"><a href="Joseph Kwong resume.1.html">portfolio</a></li>
         <li class="linkactive" onclick="reStyle(2)">reflection<li>
         <li class="link" onclick="reStyle(3)"><a href="Joseph Kwong resume.3.html">contact</a></li>
        
	</ul>
</div>
<div id="reflection"> 
	  
</div>

<div id="btt">
<a  href="Joseph Kwong resume.1.html" >BACK TO TOP<a>
</div>

<div class=bottom>
<div class=section6>

<p id="text6">Copyright © 2018 Joseph Kwong - All Rights Reserved.</p>
</div>
</div>
</body>

Answer 1

您在<p> Archie is a dog that likes to steal things. If you are interested in seeing Archie, click on <a onclick="launchModal('img1');return false;" href="#">this link</a><img class="responsive" src="https://i.imgur.com/cQy7Yg.jpg" alt="img1" id="img1"> and a picture of him will pop up. Wellington is a dog that likes to smile and eat cupcakes. If you are interested in seeing Wellington, click on <a onclick="launchModal('img2');return false;" href="#">this link</a><img class="responsive" src="https://i.imgur.com/sPhLIKY.jpg" alt="img2" id="img2"> and a picture of him will pop up.</p>  <div id="myModal" class="modal"> <span class="close">x</span> <img class="modal-content" id="img01"> </div>标记的末尾留下了/。尝试添加<a>，看看是否可以解决。

CSS边距：0自动弄乱另一个DIV的对齐方式

1 个答案: