ホームページ > 記事 > ウェブフロントエンド > Pure CSSで3カラムレイアウトを実現(両側固定、中央アダプティブ)_html/css_WEB-ITnose
Pure CSSで3カラムレイアウトを実現(両側固定、中央アダプティブ)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:221189ブラウズ
インターネットでいくつかの事例を読んだ後、複雑であることがわかったので、これについて説明する記事をまとめました。
以前に誰かがこの質問をしましたが、私はまだ答えていません。 ==
コードを見てください:
html:
1 <div class="top">this is top</div>2 <div class="container">3 <div class="left">this is left</div>4 <div class="center">this is center</div>5 <div class="right">this is right</div>6 </div>7 <div class="footer">this is footer</div>
CSS:
1 .top{ 2 width: 100%; 3 height: 40px; 4 background-color: #cccccc; 5 } 6 .footer{ 7 width: 100%; 8 height: 50px; 9 background-color: #abdc44;10 }11 /*左右固定，中间自适应*/12 /*Start*/13 .container{14 width: 100%;15 height: 100%;16 position: relative;17 }18 .left{19 position: absolute;20 left: 0;21 top: 0;22 width: 400px;23 height: 800px;24 background-color: black;25 }26 .center{27 width: auto; /*如果没有这一句，那么，center这个div的文字就不会自动换行*/28 margin: 0 400px;29 height: 1000px;30 background-color: yellow;31 }32 .right{33 position: absolute;34 top: 0;35 right: 0;36 width: 400px;37 height: 900px;38 background-color: red;39 }40 /*End*/ 最終的には次のようになります:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。