1. 首页
  2. 问答
  3. 其中的包装或div将不会去我的网站上的某些页面的底部

其中的包装或div将不会去我的网站上的某些页面的底部

2013-11-20 12 views
2

在我的网站上，所有的文字页面，保持在页面底部的包装。出于某种原因，在包含图像的页面上，包装不会到达底部，也不会包含图像的div。其中的包装或div将不会去我的网站上的某些页面的底部

下面是HTML

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Just Joel</title> 
    <link href="../CSS/JJ.css" rel="stylesheet" type="text/css" /> 
    <link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css"> 
    <link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css"> 

     <meta charset="utf-8" /> 

     <script type="text/javascript" src="../js/jquery-1.4.3.js"></script> 
     <script type="text/javascript" src="../js/jquery.corner.js"></script> 
<script type='text/javascript' src="../js/slideshow.js"></script> 


     <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
<link href="../../../CSS/JJ.css" rel="stylesheet" type="text/css"> 

    </head> 

    <body> 

    <div id="wrapperfull"> 

    <div id="header"> 
    <a href="index.html"><img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header"></a> 
    </div><!-- end header div --> 

    <div class="navigation"> 
    <div class="menu-holder"> 
    <ul class="menu"> 
       <li><a href="../../index.html">Home</a> 
       </li> 
       <li><a href="../../about.html">About</a> 
       </li> 
       <li><a href="#">Work</a> 

      <ul class="submenu"> 
       <li><a href="../../print.html">Print</a> 
       </li> 
       <li><a href="../../branding.html">Branding</a> 
       </li> 
       <li><a href="../../photography.html">Photography</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="../../blog.html">Blog</a> 
     </li> 
     <li><a href="../../inspired.html">Inspired</a> 
     </li> 
     <li><a href="../../contact.html">Contact</a> 
     </li> 
     </ul> 
     </div> 
    <!-- menu-holder end --> 
    </div><!-- end navigation div --> 


    <div class="blog-container"> 
    <div id="sidebarwrapper"> 

<div id="sidebar"> 


    <h1>TREE TOP NEWS</h1> 
    <br> 
    <p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p> 

    <p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p> 


    </div><!--sidebar!--> 
    </div> 


<div class="project"> 

    <img src="../../../Images/Tree Top News/P7158702.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158703.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158711.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/P7158701.jpg" alt="Tree Top" class="image" height="378" width="580"> 
    <img src="../../../Images/Tree Top News/Tree Top News 2010-6.jpg" alt="Tree Top" class="image" height="378" width="580"> 

    </div> 

    </div> 

    </div> 

    </body> 
    </html>

这里是CSS

#wrapperfull { 
min-height: 100%; 
width: 1050px; 
border: none; 
margin-top: 0px; 
background-color: #FFF; 
position: relative; /* for the absolute positioned footer */ 
margin-right: auto; 
margin-bottom: auto; 
padding-top: 0.1px; 
padding-right: 30px; 
padding-bottom: 0px; 
padding-left: 30px; 
    } 

    #head { 
height: 100px; 
width: 1050px; 
border: none; 
margin: auto; 
background-color: #FFF; 
position: fixed; 
    } 

    #header { 
height: 135px; 
width: 1045px; 
font-family: Helvetica, sans-serif; 
position: fixed; 
background-color: #FFF; 
margin-top: 0px; 
    } 

    #footer { 
position: absolute; 
width: 1050px; 
height: 85px; 
bottom: 0; 
padding: 0px; 
margin-bottom: 150px; 
    } 

    .footer-style { 
padding: 40px; 
    } 

    h1 { 
font-family: "geogtq md"; 
color: #00BDE5; 
font-size: 25px; 
text-decoration: none; 
margin-top: 35px; 
    } 

    h1:hover { 
color: #007889; 
font-size: 25px; 
    } 

    h2 { 
font-family: Helvetica, sans-serif; 
color: #00BDE5; 
font-size: 25px; 
text-decoration: none; 
    } 

    h2:hover { 
color: #007889; 
font-size: 25px; 
    } 

    p { 
font-family: Helvetica, sans-serif; 
color: #01778B; 
font-size: 12px; 
text-align: justify; 
    } 

    img { 
float: right; 
    } 

    html { 
margin: 0; 
padding: 0; 
border: none; 
height: 100%; 
    } 

    body { 
margin: 0; 
padding: 0; 
border: none; 
height: 100%; 
background-image: url(../Images/stripe_70d2cce6f1e8675c4b38e18625444054.png); 
background-repeat: repeat; 
    } 

    /* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */ 


    .container { 
    height: 100%; 
    width: 1050px; 
    margin-top:120px; 
    display: inline-block; 
    background-color: #FFF; 
    } 

    .heading { 
height: 90px; 
width: 750px; 
float: left; 
margin-top: 70px; 
position: fixed; 
background-color: #FFF; 
margin-bottom: 35px; 
margin-left: auto; 
    } 

    .blog-container { 
    min-height: 100%; 
    width: 700px; 
    margin-top: 170px; 
margin-right: 0px; 
    background-color: #FFF; 
    } 

    .work-container { 
    min-height: 100%; 
    width: 585px; 
    margin-top: 70px; 
    background-color: #FFF; 
    } 

    .slideshow { 
width: 900px; 
list-style: none; 
position: relative; 
margin-top: 25px; 
    } 

    ul.slideshow li { 
position: absolute; 
left: -2px; 
top: -9px; 
display: inline; 
    } 

    .navigation { 
height: 150px; 
width: 600px; 
margin-top: 0px; 
margin-left: auto; 
padding-top: 20px; 
font-family: Helvetica, sans-serif; 
position: fixed; 
background-color: #FFF; 
    } 

    .menu-holder ul { 
height: 120px; 
    padding: 0; 
    list-style-type: none; 
    } 

    .menu-holder ul li { 
position: relative; 
float: left; 
line-height: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 100px; 
margin-left: 0px; 
padding-top: 0px; 
padding-right: 10px; 
padding-bottom: 0; 
padding-left: 0px; 
    } 

    .menu-holder ul li:hover ul { 
    display: block; 
float: left; 
color: #000; 
    } 
    .menu-holder ul li a { 
font-family: Helvetica, sans-serif; 
font-size: 15px; 
display: block; 
color: #00BDE5; 
text-decoration: none; 
padding-top: 15px; 
padding-right: 10px; 
padding-bottom: 15px; 
padding-left: 0px; 
    } 

    .menu-holder ul li a:hover { 
color: #007985; 
    } 

    .menu-holder ul li ul { 
    float: none; 
    display: none; 
    position: absolute; 
    top: 35px; 
    left: -10px; 
    margin: -1px 0 0px 10px; 
    padding: 5px 10px 5px 10px; 
    white-space: nowrap; 
    } 
    .menu-holder ul li ul:hover { 
    display: block; 
    } 
    .menu-holder ul li ul li { 
    position: static; 
     float: none; 
     display: inline; 
     padding: 0px 0px 0px 0px; 
     margin: 0px 0px 0px -10px; 
margin-right: 20px; 
    } 

    .menu-holder ul li ul li a { 
    display: inline; 
    margin: 0 0px 0 0px; 
    -webkit-border-radius: 0; 
    } 

    a:link { 
text-decoration: none; 
color: #000; 
font-family: Helvetica, sans-serif; 
    } 

    a:hover { 
text-decoration: none; 
color: #000; 
font-family: Helvetica, sans-serif; 
    } 

    ul { 
    font-size: 15px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
margin-right: 40px; 
    } 

    ul li, ul li ul li { 
display: inline; 
position: relative; 
float: left; 
color: #00BDE5; 
    } 

    li ul { 
    display: none; 
    width: 450px; 
margin-right: 20px; 
    } 

    ul ul li a { 
    font-family: Helvetica, sans-serif; 
font-size: 15px; 
text-decoration: none; 
    margin-right: 15px; 
    white-space: nowrap; 
    color: #00BDE5; 
margin-right: 20px; 
    } 

    li:hover ul { 
    display: inline; 
    position: absolute;  
    } 

    li:hover li { 
    float: none; 
    font-size: 15px; 
    margin-top:3px; 
    } 

    .services1 a { 
    font-family: Helvetica, sans-serif; 
font-size: 12px; 
color: #00BDE5; 
    float: left; 
    list-style-type: none; 
    } 

    a:link { 
text-decoration: none; 
color: #00BDE5; 
font-family: Helvetica, sans-serif; 
text-align: center; 
    } 

    a:hover { 
text-decoration: none; 
color: #007889; 
font-family: Helvetica, sans-serif; 
text-align: center; 
    } 

    /* Thumb size 230 x 150 px */ 

    .work_thumbs { 
width:1000px; 
margin: 0px auto 0 auto; 
float: left; 
    } 

    .work_thumbs li { 
margin: 0px 15px 15px 0px; 
list-style-type: none; 
display: block; 
float: left; 
display: inline; 
font-family: Helvetica, sans-serif; 
color: #FFF; 
overflow: hidden; 
    } 

    .work_thumbs li a { 
float: inherit; 
display: block; 
width: 230px; 
padding-bottom: 20px; 
font-family: Helvetica, sans-serif; 
color: #00BDE5; 
height: 180px; 
border: 1px solid #02BDE5; 
overflow: hidden; 
text-align: centre; 
font-size: 12px; 
    } 

    .work_thumbs li .type { 
color: #01BDE6; 
    } 

    .work_thumbs li a:hover { 
background-color: #ceeef6; 
border-bottom: 1px solid #02BDE5; 
text-decoration: none; 
color: #007789; 
font-family: Helvetica, sans-serif; 
text-align: centre; 
    } 

    .work_thumbs li .thumb { 
margin-bottom: 15px; 
display:block 
    } 

    .project { 
width: 580px; 
height: 1000px; 
margin-top: 0px; 
margin-right: 100px; 
left: auto; 
background-color: #fff; 
    } 

    .single .header { 
position:static 
    } 

    .single #sidebar a { 
color:#000; 
    } 

    .single #sidebar a:hover { 
color:#4f4f4f 
    }  

    .image { 
margin: 0px; 
padding-bottom:50px; 
    } 

    /* Set fixed top margin */ 

    #sidebar { 
width: 273px; 
height: 200px; 
left: 50%; 
top: 165px; 
background-color: #FFF; 
padding: 10px 20px 10px 10px; 
color:#00C0EE; 
font-family: Helvetica, sans-serif; 
position: fixed; 
color: #007789; 
font-size: 15px; 
    } 

    #sidebar h1 { 
font-family: Helvetica, sans-serif; 
padding: 5px 0 15px 0; 
font-weight: normal; 
font-size: 18px; 
color: #00C0EE; 
    } 

    #sidebar p { 
padding-bottom: 15px; 
font-family: Helvetica, sans-serif; 
color: #007789; 
height: 100%; 
    } 

    #sidebarwrapper { 
right: 822px; 
position: absolute; 
width: 205px; 
height: 200px; 
top: 248px; 
    } 

    * { 
margin: 0; padding: 0; 
    } 

    #page-wrap { 
width: 600px; 
margin: 15px auto; 
position: relative; 
    } 

    #sidebar ul { 
background: #EEE; 
padding: 10px; 
    } 

    li { 
float: left; 
display: inline; 
    } 

    #main { 
width: 700px; 
float: left; 
    }

http://jsfiddle.net/Q6Lze/

来源

2013-11-20 user3015137

+1

使用jsfiddle.net请！ – agconti

回答

1

你需要一个clearfix清除其中包含的浮动。这迫使格包含漂浮的图片占据这个空间，而不是崩溃到本身：

.project:after { 
    display: table; 
    content: ''; 
    clear: both; 
}

或者只是把它添加到div:after代替

来源

2013-11-20 22:14:20 brouxhaha

+0

非常感谢，一直在窃听我一会，救生员 – user3015137

相关问题

 相关问题