当有许多带自动高度的标签时,不能增加div标签的高度

时间:2017-10-26 13:51:06

标签: jquery html css

以下是HTML代码:



   

 #posts {
      width: 1000px;
      height: auto;
      margin: auto;
      border: 3px solid red;
    }

    #header-posts {
      width: 100%;
      height: auto;
    }
#show{
width: 100%;
height: 500px;
}

    .contactus
    	{
    		width: 100%;
    		height: 50px;
    		background-color: hsla(0,0%,78%,0.76);
    	}
    	#main-contactus
    	{
    		width: 1000px;
    		height: 50px;
    		margin: auto;
    	}
    	#linkus
    	{
    		width: 300px;
    		height: 50px;
    		position: relative;
    		float: left;
    	}
    	#instagram
    	{
    		width: 30px;
    		height: 30px;
    		background-color: #525252;
    		border-radius: 30px;
    		position: relative;
    		top: 20%;
    		left: 5%;
    		float: left;
    		text-decoration: none;
    	}
    	#instagram::before
    	{
    		content: "";
    		width: 0.9em;
    		height: 0.6em;
    		background-color: azure;
    		position: absolute;
    		top: 45%;
    		left: 8px;
    		border-bottom-right-radius: 2px;
    		border-bottom-left-radius: 2px;
    	}
    	#instagram::after
    	{
    		content: "";
    		width: 0.45em;
    		height: 0.45em;
    		background-color: azure;
    		position: absolute;
    		border: 1px solid #525252;
    		top: 35%;
    		left: 34%;
    		border-radius: 10px;
    	}
    	#instagram span
    	{
    		position: absolute;
    		width: 0.35em;
    		height: 0.25em;
    		background-color: azure;
    		left: 55%;
    		top: 20%;
    		border-radius: 1px;
    	}
    	#instagram p
    	{
    		text-align: center;
    		width: 100px;
    		height: 30px;
    		background-color: #525252;
    		color: white;
    		line-height: 30px;
    		position: absolute;
    		top: 22px;
    		left: -32px;
    		display: none;
    	}
    	#instagram p::before
    	{
    		content: "";
    		position: absolute;
    		width: 0.5em;
    		height: 0.5em;
    		background-color: #525252;
    		left: 42px;
    		top: -3px;
    		-webkit-transform: rotate(45deg);
    	}
    	#instagram:hover p
    	{
    		display: block;
    	}
    	#instagram:hover
    	{
    		background-color: white;
    	}
    	#instagram:hover::before,
    	#instagram:hover::after,
    	#instagram:hover span
    	{
    		background-color: #525252;
    	}
    	#instagram:hover::after
    	{
    		
    		border: 1px solid white;
    	}
    	#gmail
    	{
    		width: 30px;
    		height: 30px;
    		background-color: #525252;
    		border-radius: 30px;
    		position: relative;
    		top: 20%;
    		left: 8%;
    		float: left;
    		text-decoration: none;
    	}
    	#gmail::before
    	{
    		content: "g";
    		position: absolute;
    		font: bold 25px tohama;
    		color: white;
    		left: 20%;
    	}
    	#gmail::after
    	{
    		content: "+";
    		position: absolute;
    		font: bold 15px tohama;
    		color: white;
    		left: 60%;
    	}
    	#gmail p
    	{
    		text-align: center;
    		width: 100px;
    		height: 30px;
    		background-color: #525252;
    		color: white;
    		line-height: 30px;
    		position: absolute;
    		top: 22px;
    		left: -32px;
    		display: none;
    	}
    	#gmail p::before
    	{
    		content: "";
    		position: absolute;
    		width: 0.5em;
    		height: 0.5em;
    		background-color: #525252;
    		left: 42px;
    		top: -3px;
    		-webkit-transform: rotate(45deg);
    	}
    	#gmail:hover p
    	{
    		display: block;
    	}
    	#gmail:hover
    	{
    		background-color: sandybrown;
    	}
    	#gmail:hover::before,
    	#gmail:hover::after
    	{
    		color: #525252;
    	}
    	
    	
    	
    	#facebook
    	{
    		width: 30px;
    		height: 30px;
    		background-color: #525252;
    		border-radius: 30px;
    		position: relative;
    		top: 20%;
    		left: 11%;
    		float: left;
    	}
    	#facebook::before
    	{
    		content: "F";
    		color: white;
    		font: bold 20px tohama;
    		left: 30%;
    		top: 10%;
    		position: absolute;
    	}
    	#facebook p
    	{
    		text-align: center;
    		width: 100px;
    		height: 30px;
    		background-color: #525252;
    		color: white;
    		line-height: 30px;
    		position: absolute;
    		top: 22px;
    		left: -32px;
    		display: none;
    	}
    	#facebook p::before
    	{
    		content: "";
    		position: absolute;
    		width: 0.5em;
    		height: 0.5em;
    		background-color: #525252;
    		left: 42px;
    		top: -3px;
    		-webkit-transform: rotate(45deg);
    	}
    	#facebook:hover p
    	{
    		display: block;
    	}
    	#facebook:hover
    	{
    		background-color: white;
    	}
    	#facebook:hover::before
    	{
    		color: saddlebrown;
    	}
    	
    	
    	#telegram
    	{
    		width: 30px;
    		height: 30px;
    		background-color: #525252;
    		border-radius: 30px;
    		position: relative;
    		top: 20%;
    		left: 14%;
    		float: left;
    		text-decoration: none;
    	}
    	#telegram::before
    	{
    		content: "Tele";
    		position: absolute;
    		color: white;
    		font: bold 10px tohama;
    		left: 20%;
    		top: 15%;
    	}
    	#telegram::after
    	{
    		content: "Gram";
    		position: absolute;
    		color: white;
    		font: bold 10px tohama;
    		top: 45%;
    		left: 8%;
    	}
    	#telegram p
    	{
    		text-align: center;
    		width: 100px;
    		height: 30px;
    		background-color: #525252;
    		color: white;
    		line-height: 30px;
    		position: absolute;
    		top: 22px;
    		left: -32px;
    		display: none;
    	}
    	#telegram p::before
    	{
    		content: "";
    		position: absolute;
    		width: 0.5em;
    		height: 0.5em;
    		background-color: #525252;
    		left: 42px;
    		top: -3px;
    		-webkit-transform: rotate(45deg);
    	}
    	#telegram:hover p
    	{
    		display: block;
    	}
    	#telegram:hover
    	{
    		background-color: white;
    	}
    	
    	#telegram:hover::before,
    	#telegram:hover::after
    	{
    		color: red;
    	}
    	
    	#fav-site
    	{
    		width: 700px;
    		height: 50px;
    		float: left;
    	}
    	#fav-site a
    	{
    		text-align: center;
    		width: 120px;
    		height: 30px;
    		font: bold 20px tohama;
    		color: #525252;	
    		float: left;
    		text-decoration: none;
    		margin-left: 10px;
    		margin-top: 10px;
    		line-height: 30px;
    	}
    	#fav-site a:hover
    	{
    		background-color: brown;
    		color: azure;
    	}
    	.footer
    	{
    		width: 100%;
    		height: 50px;
    		background-color: brown;
    	}
    	#p-footer
    	{
    		width: 1000px;
    		height: 50px;
    		margin: auto;
    		position: relative;
    	}
    	#p-footer p
    	{
    		direction: none;
    		color: hsla(0,0%,80%,0.78);
    		font: bold 15px tohama;
    		text-align: center;
    		margin-top: 0px;
    		line-height: 50px;
    	}
    	#p-footer p a
    	{
    		text-decoration: none;
    		color: white;
    		float: left;
    		position: absolute;
    		left: 150px;
    	}
    	#p-footer:hover a
    	{
    		color: hsla(127,100%,50%,1.00);
    	}

    <div id="posts">
      <div id="header-posts">
<div id="show">

</div>
      </div>
    </div>


    <div class="contactus">
    	<div id="main-contactus">
    	</div>
    </div>
&#13;
&#13;
&#13;

当我想看到结果时,帖子div的高度不会增加,但是当我想改进帖子div时,我会做什么呢?请帮我。 我编辑它,但是当我在这个网站上运行此代码时,结果是真的,但是当我想在mozilla或chrome中运行时,结果是错误的,因为没有增加show div.i的高度想要响应列表

0 个答案:

没有答案