div レイアウトの問題、それを一番下に沈めるにはどうすればよいですか? _html/css

div レイアウトの問題、それを一番下に沈めるにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:16:36

オリジナル

1901 人が閲覧しました

この投稿は、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 を配置したいのですが足、どうしよう？どうもありがとうございます！！！
追加説明: コンテンツレイヤーはコンテンツの高さに応じて固定されません。

ディスカッションへの返信 (解決策)

<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 をサポートしていないブラウザーと互換性がある必要があります

すごい、これがあなたが行う方法ですありがとう、満足できません。また、獲得ポイントは 50 ポイント減ります。
とにかく、私はあなたのために長い間コードを手動で入力してテストしましたが、それは功績にもならず、労力もかかりません~