首頁 > web前端 > html教學 > div布局问题,怎么沉底?_html/css_WEB-ITnose

div布局问题,怎么沉底?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:16:36
原創
1902 人瀏覽過

本帖最后由 lane_yang 于 2012-11-12 15:57:26 编辑

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>无标题页</title>    <style type="text/css">    body{        margin:0px;    }    #head{        height:50px;        background-color:lightGreen;    }    #nav{        float:left;        width:100%;        height:200px;        background-color:gray;    }    #content    {        float:right;        width:80%;        height:600px;        background-color:lightGray;    }    #foot{        height:50px;        background-color:lightGreen;    }    .clearFloat{        clear:both;    }    #img    {        float:left;        width:100%;        height:200px;        background-color:lightBlue;        margin-bottom:0px;    }     #main    {        float:left;        width:100%;        margin-bottom:0px;    }    #navContainer{        float:left;        width:20%;        background-color:#eeeeee;        margin-bottom:0px;    }        </style></head><body><div><div id="head">header</div><div class="clearFloat"></div><div id="main"><div id="navContainer"><div id="nav">tree</div><div class="clearFloat"></div><div id="img">image</div></div><div id="content">content</div></div><div class="clearFloat"></div><div id="foot">footer</div></div></body></html>
登入後複製

上面代码运行效果如下:
问题:请教各位大侠,我想把Img的div,放到foot之上左下角,如何做?非常感谢!!!
补充说明一下:content层是根据内容高度不固定。


回复讨论(解决方案)

<style>*{margin:0;padding:0;}._main{border:1px solid #ABC;width:500px;min-height:400px;margin:10px auto;position:relative;padding-bottom:20px;}._main header{border:1px solid green;height:20px;width:200px;}._main footer{border:1px solid green;position:absolute;left:0;bottom:0;}</style><section class="_main"><header>Test Header</header>可添加N多内容尝试<br />aaa<br />aaa<footer>这儿是居左下的图片</footer></section>
登入後複製

自伸缩居底

感谢回复,但是我这个程序要兼容不支持html5的浏览器

晕哦,你就这样感谢的啊,无满意结贴你也少得五十分!
不管怎么说我手动给你打代码测试了半天,没功劳还没苦劳啊~

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板