ホームページ  >  記事  >  ウェブフロントエンド  >  div レイアウトの問題、それを一番下に沈めるにはどうすればよいですか? _html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 12:16:361851ブラウズ

この投稿は、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 ポイント減ります。
とにかく、私はあなたのために長い間コードを手動で入力してテストしましたが、それは功績にもならず、労力もかかりません~

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。