Rumah > Artikel > hujung hadapan web > CSS左右固定，中间填满布局_html/css_WEB-ITnose
CSS左右固定，中间填满布局_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:36:511322semak imbas
先上个高清无码图：
源码：
<!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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：可自定义配置箭头的CSS3气泡提示框_html/css_WEB-ITnoseArtikel seterusnya：html-1_html/css_WEB-ITnose