ホームページ > 記事 > ウェブフロントエンド > CSSは左右に固定、真ん中はlayout_html/css_WEB-ITnoseで埋めます。
CSSは左右に固定、真ん中はlayout_html/css_WEB-ITnoseで埋めます。
- WBOYオリジナル
- 2016-06-24 11:36:511322ブラウズ
まずは高解像度の無修正画像:
ソースコード:
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉--> <style> div { line-height:60px; /*让字体垂直居中*/ } div.box { width: 100%; height: 60px; background: yellow; text-align: center; /*让字体水平居中*/ color: white; } div.box div.left, div.right { width: 60px; height: 60px; background: red; } div.box div.left { float: left; } div.box div.right { float: right; } div.box div.center { height: 60px; background: green; } </style></head><body> <div class="box"> <div class="left">左固定</div> <div class="right">右固定</div> <div class="center">中间填满</div> </div></body></html>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。