Home > Article > Web Front-end > CSS左右固定，中间填满布局_html/css_WEB-ITnose
CSS左右固定，中间填满布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:511278browse
先上个高清无码图：
源码：
<!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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnoseNext article：html-1_html/css_WEB-ITnose