-3

请有人帮忙，为什么我的页脚没有正确出现在底部。我申请清楚：两者；还注意到。

http://www.vellosdesigns.com/newsite/build-2/

请问你能帮忙吗？

感谢您，所有问题现在都已解决。

4

2 回答 2

2

如果你想使用 clear:both; 页脚需要有一个浮动元素的父级。这不是你的情况。

最好的方法是使用 clearfix

http://nicolasgallagher.com/micro-clearfix-hack/

将代码复制粘贴到您的 CSS 中。然后只需将类 cf 添加到您的 div

它看起来像

<div class="cf">
     <div id="smallpics" class="...">...</div>
     <div id="smallpics" class="...">...</div>
     <div id="smallpics" class="...">...</div>
</div>

希望这可以帮助 ！

于 2013-04-10T22:08:59.663 回答
0

在帮助下，我用页脚做了这个

<!DOCTYPE html>
<html>
<head>
<base href="http://www.vellosdesigns.com/newsite/build-2/" />
<style>
    html, body {height: 100%;margin: 0;background:#000;}
    h1{color:#787979;}
    #wrapper {min-height:100%;margin: 0 auto -75px;}
    #header {min-width:100%;height:150px;float:left}
    #headerContent {width:1112px;margin:0 auto;}
    #separator, #footer {height:180px;}
    #content {margin:0 auto;width:1112px;padding:15px;}
    #footer {min-width:100%;float:left;color:#fff;background-color:#7f7f7f}
    #footerContent {margin: 0 auto;width:1112px;padding:10px 0px;}
    .address {color:#787979; text-align:right; font-size:12px; float:right; line-height:190%;}
    #gallery {background:#FFF; height:450px;}
    #navcontainer {float:right; margin-top:15px;}
    #navlist li { display: inline; list-style-type: none;  }
    #navlist li a:link {text-decoration:none; color:#787979; font-size:12px;  margin-left:25px;}
    .smallpics {width:545px; height:180px; float:left; margin-top:40px;}
    .s-pic-b,.s-pic-d {margin-left:20px;}
    .s-pic-c,.s-pic-d {padding-top:50px;}
    div.fadehover {position: relative;  }
    img.a {position: absolute;  left: 0;top: 0; z-index: 10; }
    img.b {position: absolute;  left: 0;top: 0; }
</style>
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        });
    });
</script>
</head>
<body>
  <div id="wrapper">
     <div id="header">
         <div id="headerContent">
            <p><span class="address">Whetstone - 020-8888-8888 <br />Kensington - 020-8888-8888</span></p>
            <img src="logo.png" />
            <div id="navcontainer">
                <ul id="navlist">
                <li><a href="#">Bespoke</a></li>
                <li><a href="#">Contemporary</a></li>
                <li><a href="#">Achitecture &amp; Interiors</a></li>
                <li><a href="#">Management &amp; Build</a></li>
                <li><a href="#">Contact Us</a></li>
                </ul>
            </div>  
         </div>
     </div>
     <div style="clear:both;"></div>
     <div id="content">
            <div id="gallery"></div>
            <div class="smallpics s-pic-a">
                <h1>Bespoke</h1>
                <div class="fadehover">
                    <a href=""><img src="a-bw.png" alt="" class="a" /><img src="a-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div class="smallpics s-pic-b">
                <h1>Contemporary</h1>
                <div class="fadehover">
                    <a href=""><img src="b-bw.png" alt="" class="a" /><img src="b-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div class="smallpics s-pic-c">
                <h1>Achitecture &amp; Interiors</h1>
                <div class="fadehover">
                    <a href=""><img src="c-bw.png" alt="" class="a" /><img src="c-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div class="smallpics s-pic-d">
                <h1>Management &amp; Build </h1>
                <div class="fadehover">
                    <a href=""><img src="d-bw.png" alt="" class="a" /><img src="d-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div style="clear:both;"></div>   
     </div>
     <div id="separator"></div>
  </div>
  <div id="footer">
      <div id="footerContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>
于 2013-05-14T16:17:53.043 回答