HTML / CSS部分无法正常工作

时间：2015-03-18 02:28:13

标签： html css

我有一个简单的HTML / CSS媒体网站。它分为标题，2个部分和页脚。现在看起来还不错，但是为了让我调整第二部分的上边距，我需要至少155px才能移动。基本上一切都在155px左右？是什么造成的？即使我的页脚在它移动之前至少需要155px上边距。谁能看到任何东西？我确定我犯了一个非常愚蠢的错误。

以下是我的JSFiddle问题，我也发布了以下代码。

@charset "UTF-8";
body {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	max-width: 960px;
}
#wrapper {
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	position: absolute;
}
header {
	height: 95px;
	border-left: thin solid #000000;
	border-right: thin solid #000000;
	border-bottom: 4px solid #867E7E;
	border-top: thin solid #000000;
	background-color: #000000;
	width: 100%;
	opacity: 0.8;
	display: block;
	margin-bottom: 35px;
}
.top-nav {
	float: right;
	margin-right: 10%;
	margin-top: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	display: inline;
	padding-right: 2px;
}
.top-nav ul li {
	display: inline;
	margin-left: 20px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	float: left;
	text-decoration: none;
}
.top-nav ul li a {
	color: #FFFFFF;
	text-decoration: none;
	display: inline;
}
.top-nav li a:link        , top-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: inline;
	text-decoration: none;
}
.top-nav li a:hover      , top-nav li a:active      ,top-nav li a:focus {
	color: #867E7E;
	display: inline;
}
.top-nav a.selected {
	color: #867E7E;
}
.social-media-top {
	display: inline;
	float: right;
	margin-right: 41px;
	margin-top: 51px;
}

.social-icon {
	width: 20px;
	height: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 5px;
	margin-left: 5px;
}

#music-content {
	list-style-type: none;
	display: block;
}
#music-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
}
#music-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#music-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#music-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.music-info {
	display: block;
	float: left;
	margin-left: 15px;
}
#movie-content {
	list-style-type: none;
	display: block;
}
#movie-content h2 {
	margin-left: 35px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0,0,0,1.00);
	display: block;
	clear: both;
}
#movie-content li {
	text-align: left;
	display: block;
	width: 45%;
	float: left;
	padding-top: 15px;
}
#movie-content a {
	text-decoration: none;
	display: block;
	float: left;
}
#movie-content p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}
.movie-info {
	display: block;
	float: left;
	margin-left: 15px;
}

img {
	max-width: 100%;
}



footer {
	height: 55px;
	background-color: #E8EBEF;
	color: #000000;
	clear: both;
	text-align: center;
	border-top: 1px solid #C0C0C0;
	float: none;
}
.bottom-nav {
	float: left;
	padding-left: 0px;
	padding-right: 0px;
	clear: both;
	display: inline-block;
	margin-top: 20px;
}
.bottom-nav ul li {
	display: inline;
	float: left;
	text-decoration: none;
	margin-right: 3px;
	margin-left: 0px;
}
.bottom-nav ul li a {
	color: #000000;
	text-decoration: none;
}
.bottom-nav li a:link         , bottom-nav li a:visited {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	display: block;
	text-decoration: none;
}
.bottom-nav li a:hover       , bottom-nav li a:active       ,bottom-nav li a:focus {
	color: #867E7E;
}
.bottom-nav a.selected {
	color: #867E7E;
}

.copyright {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
}
footer p {
	text-align: center;
}
.social-media-bottom {
	float: right;
	display: inline;
	margin-top: 20px;
	margin-right: 41px;
}
#media-content {
	width: 100%;
	display: inline-block;
}
<!doctype html>


<title>Media Page - </title>

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">


<body>
<div id="wrapper">
  <header>
       
    <div class="social-media-top">
  	 	<a href="http://twitter.com"><img src="images/twitter_gray_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_white_1024.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="mailto:tkmets5@yahoo.com">
        	<img src="images/mail.ico" alt="mail" class="social-icon">
        </a>
    </div>	
    <nav class="top-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
           <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
   
  </header>
  
  

  <section id="music-content">
  		<h2> Music Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="music-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
  
  <section id="movie-content">
  		<h2> Movie Selections </h2>
    	<ul>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 1</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
          </li>
            <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 2</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 3</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li> 
             <li>
                <a href="images/fff_150x150.png">
                    <img src="images/fff_150x150.png" alt=""/>                    
                </a>
                	<div class="movie-info">
                        <p>this is test text 4</p>
                        <p>sdkljfkdlsfj lsdkjflksdf</p>
                        <p>skdjfskdfj</p>
             		</div>
            </li>                      
       </ul>
  </section>
 
 
  
  <footer>
  	<nav class="bottom-nav">
   		 <ul>
            <li><a href="page_index.html">Home</a></li>
            <li><a href="media.html" class="selected">Media</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
    </nav> 
  	<div class="social-media-bottom">
  	 	<a href="http://twitter.com"><img src="images/twitter_blue_48.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="images/fb_blue_1024.png" alt="Facebook Logo" class="social-icon"></a>
    </div>	 
  	<div class="copyright">
   	  <p>&copy; 2015</p>
    </div>
  	
  </footer>
</div>
</body>

1 个答案:

答案 0 :(得分：1)

你需要清除li的花车。我已经通过向section添加了一个clearfix样式来更新你的小提琴。

Fiddle

样式更新是：

#music-content:after {
  content: "";
  display: table;
  clear: both;
}

和

#movie-content:after {
  content: "";
  display: table;
  clear: both;
}

当你浮动和元素时，你将它从文档的“流”中取出。这意味着它的父容器（你的section）没有收到浮动的li的高度（恰好是155px左右）。他们只从<h2>标题获得了高度。

相关问题
最新问题