改变保证金 - 顶部影响其他地方

时间：2018-05-31 23:58:17

标签： html css html5 p

我希望有人可以帮助我，我知道这里有很多代码，但我自己无法弄明白，问题是当我增加＃col1 p的margin-top {例如从50到80或者什么时候，然后突然正确页面的一部分也下来了（＃col2）如何阻止它以及问题在哪里以及为什么它只影响右侧而不是左侧，我只是在提高我的css技能

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
	<title>Sivu</title>
	<meta charset="utf-8"/>
	<style> 
body{
	width:960px;
	margin:auto;
	border: 1px solid #878787;
}
/*Poistetaan html-elementtien oletusmarginaalit. Yleensä sotkee asettelun.*/
h1, h2, p{
	margin:0;
	
}


#header{
	width:100%;
	height:200px;
	/*Kaksi kuvaa päällekkäin*/
	background-image:url(logo.png),url(kuva1.jpg);
	background-repeat:no-repeat;
}
#universitaslorem{
	width:100%;
	height:70px;
		background-color:#80ced6;
		position:relative;
		color:white

}
h1 span{
    font-size: 60px;

}
#header-content{
  position: absolute;
  bottom: 0;
  left: 0;
   


}
#header-content h1{
   font-family: Broadway, Castellar, fantasy;
    font-size: 35px;
}
#navigation ul{
	list-style-type:none;
	margin:0;
	padding:0;

}

#navigation li{
	display:inline;
	float:left;
}

#navigation a:link,a:visited{
	display:block;
	font-weight:bold;
	color:#fff;
	background-color:#80ced6;
	padding:4px;
		padding-left:9px;
	text-decoration:none;
}

#navigation a:hover{
	background-color:#5f0082;
}
.jatkoanavigaatiolle{
	background-color:#80ced6;
	color:#fff;

	padding:4px;

}
#content{
	width:460px;
	  margin-left: 170px;  
	  overflow: hidden;
	  padding:10px;

}
#content img{
    margin-top: 70px;
float:right;
}
#col1 p{
	width:460px;
		font-family:"Times New Roman", Times, serif; 
    font-size: 16px;
	margin-top:50px;

}



#col2{
	width:210px;
	margin: 20px 15px;
    padding: 15px;
		float: right;
	    margin-top: -373px;

}
.resources h3{
	background-color:#80ced6;
color:white;
}
.resoucesborder{
    border-bottom: 2px solid #878787;
    line-height: 29px;}

#col2 fieldset{
	border:solid 2px black;

}
#col4{
	float:left;
	width:210px;

}
#col4 img{
float:right;
}

#nappi{
	/*Kuva buttoniin*/
	background-image:url("button.png");
	width:185px;
	height:55px;
	margin:15px 0px;
}
#footer{
	clear:both;
	width:958px;
	background-color:#80ced6;
	text-align:center;
	padding:5px 0px;
}

	
	</style>
</head>

<body>
<div id="universitaslorem">
  <div id="header-content"><h1><span>U</span>jyjtgjyty</h1></div>

	</div>
	<div id="header">
	</div>

	<div id="navigation">
		<ul>
			<li><a href="#">ffffs</a></li>
			<li><a href="#">uuuu</a></li>
			<li><a href="#">cccc</a></li>
			<li><a href="#">gggg</a></li>
		</ul>
	</div><div class="jatkoanavigaatiolle">  .</div>
	<div id="col4">
	
			<h3>nnnn</h3>
	<h3>Ddddd</h3>	<img src="kuva4.jpg" alt="Statue"></img>

<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum dolor 
</p>

	<h3>aiii</h3>
	<img src="kuva3.jpg" alt="Statue"></img>

	</div>
	<div id="content">
	<img src="kuva2.jpg" alt="Statue"></img>

		<div id="col1">
		
		
		<h1>ooooooo</h1>
		
<p>
LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem ipsum dolor sit amet. consecteturadipiscin elit. VAenean dui libero, accumsan non elementum id. ullamcorper sit amet sem.Lorem ipsum dolor sit amet. consectetur adipiscin elit. 
</p><p>
Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>			
		</div>
				</div>
		<div id="col2">
		<div class="resources"> <h3>Resources for</h3></div>
		
<div class="resoucesborder">eee</div>
<div class="resoucesborder">sss</div>
<div class="resoucesborder">fff</div>
<div class="resoucesborder">gggg</div>
<div >eee</div>
		<div class="resources"> <h3>hhh</h3>
		<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>	
		</div>

		
		
		
		</div>
			

	

	
	<div id="footer">
		<p>fffffff </p>

	<p>Copyright &copy; hhh</p>
	</div>




</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

    #col1 p {
        width: 460px;
        font-family: "Times New Roman", Times, serif;
        font-size: 16px;
        margin-top: 80px;

    }



    #col2 {
        width: 210px;
        margin: 20px 15px;
        padding: 15px;
        float: right;
        margin-top: -453px;

    }

所以看完你的代码后，你似乎已经在你的CSS中编写了所有内容。虽然这在很大程度上起作用，但有更简单的方法可以解决这个问题。您可能希望了解Bootstrap，它是前端Web设计的绝佳工具。 （特别是看看BootStrap网格系统，但是如果你感兴趣它还有很多其他的工具可以让设计变得更容易）

至于您的保证金最高问题，为了更改＃col1的保证金最高限额，您还必须更改保证金最高值为col2。在您的示例中，您提到将＃col1 margin-top从50px更改为80px作为示例。我继续操纵像素以降低col1并保持col2向上。这是一个玩数字的问题。希望这有帮助！

答案 1 :(得分：0)

这是因为

  

您尚未在float

中设置#content
  • 从margin-left
    • 移除#content
  • 从#col2
    • 移除负边距 

body{
	width:960px;
	margin:auto;
	border: 1px solid #878787;
}
/*Poistetaan html-elementtien oletusmarginaalit. Yleensä sotkee asettelun.*/
h1, h2, p{
	margin:0;
	
}


#header{
	width:100%;
	height:200px;
	/*Kaksi kuvaa päällekkäin*/
	background-image:url(logo.png),url(kuva1.jpg);
	background-repeat:no-repeat;
}
#universitaslorem{
	width:100%;
	height:70px;
		background-color:#80ced6;
		position:relative;
		color:white

}
h1 span{
    font-size: 60px;

}
#header-content{
  position: absolute;
  bottom: 0;
  left: 0;
   


}
#header-content h1{
   font-family: Broadway, Castellar, fantasy;
    font-size: 35px;
}
#navigation ul{
	list-style-type:none;
	margin:0;
	padding:0;

}

#navigation li{
	display:inline;
	float:left;
}

#navigation a:link,a:visited{
	display:block;
	font-weight:bold;
	color:#fff;
	background-color:#80ced6;
	padding:4px;
		padding-left:9px;
	text-decoration:none;
}

#navigation a:hover{
	background-color:#5f0082;
}
.jatkoanavigaatiolle{
	background-color:#80ced6;
	color:#fff;

	padding:4px;

}
#content{
	width:460px;
	  /* margin-left: 170px; */  
	  overflow: hidden;
	  padding:10px;
  float: left;
}
#content img{
    margin-top: 70px;
float:right;
}
#col1 p{
	width:460px;
		font-family:"Times New Roman", Times, serif; 
    font-size: 16px;
	margin-top:50px;

}



#col2{
	width:210px;
	margin: 20px 15px;
    padding: 15px;
		float: right;
	    /* margin-top: -373px; */

}
.resources h3{
	background-color:#80ced6;
color:white;
}
.resoucesborder{
    border-bottom: 2px solid #878787;
    line-height: 29px;}

#col2 fieldset{
	border:solid 2px black;

}
#col4{
	float:left;
	width:210px;

}
#col4 img{
float:right;
}

#nappi{
	/*Kuva buttoniin*/
	background-image:url("button.png");
	width:185px;
	height:55px;
	margin:15px 0px;
}
#footer{
	clear:both;
	width:958px;
	background-color:#80ced6;
	text-align:center;
	padding:5px 0px;
}
<div id="universitaslorem">
  <div id="header-content"><h1><span>U</span>jyjtgjyty</h1></div>

	</div>
	<div id="header">
	</div>

	<div id="navigation">
		<ul>
			<li><a href="#">ffffs</a></li>
			<li><a href="#">uuuu</a></li>
			<li><a href="#">cccc</a></li>
			<li><a href="#">gggg</a></li>
		</ul>
	</div><div class="jatkoanavigaatiolle">  .</div>
	<div id="col4">
	
			<h3>nnnn</h3>
	<h3>Ddddd</h3>	<img src="kuva4.jpg" alt="Statue"></img>

<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum dolor 
</p>

	<h3>aiii</h3>
	<img src="kuva3.jpg" alt="Statue"></img>

	</div>
	<div id="content">
	<img src="kuva2.jpg" alt="Statue"></img>

		<div id="col1">
		
		
		<h1>ooooooo</h1>
		
<p>
LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem ipsum dolor sit amet. consecteturadipiscin elit. VAenean dui libero, accumsan non elementum id. ullamcorper sit amet sem.Lorem ipsum dolor sit amet. consectetur adipiscin elit. 
</p><p>
Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>			
		</div>
				</div>
		<div id="col2">
		<div class="resources"> <h3>Resources for</h3></div>
		
<div class="resoucesborder">eee</div>
<div class="resoucesborder">sss</div>
<div class="resoucesborder">fff</div>
<div class="resoucesborder">gggg</div>
<div >eee</div>
		<div class="resources"> <h3>hhh</h3>
		<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>	
		</div>

		
		
		
		</div>
			

	

	
	<div id="footer">
		<p>fffffff </p>

	<p>Copyright &copy; hhh</p>
	</div>

相关问题
最新问题