什么叫做布局？
又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。
题目：假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应
1、浮动布局
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????html * { ???????margin: 0; ???????padding: 0; ?????} ?????.layout article div { ???????min-height: 100px; ?????} ?????.layout.float .left { ???????float: left; ???????width: 300px; ???????background: red; ?????} ?????.layout.float .right { ???????float: right; ???????width: 300px; ???????background: blue; ?????} ?????.layout.float .center { ???????background: yellow; ?????} ???</style> ?</head> ?<body> ???<section class="layout float"> ?????<article class="left-right-center"> ???????<div class="left"></div> ???????<div class="right"></div> ???????<div class="center"> ?????????<h1>浮动解决方案</h1> ?????????<p> ???????????这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 ?????????</p> ???????</div> ?????</article> ???</section> ?</body></html>2、绝对定位布局
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????html * { ???????margin: 0; ???????padding: 0; ?????} ?????.layout article div { ???????min-height: 100px; ?????} ?????.layout.absolute .left-center-right>div { ???????position: absolute; ?????} ?????.layout.absolute .left { ???????left: 0; ???????width: 300px; ???????background: red; ?????} ?????.layout.absolute .center { ???????left: 310px; ???????right: 310px; ???????background: yellow; ?????} ?????.layout.absolute .right { ???????right: 0; ???????width: 300px; ???????background: blue; ?????} ???</style> ?</head> ?<body> ???<section class="layout absolute"> ?????<article class="left-center-right"> ???????<div class="left"></div> ???????<div class="center"> ?????????<h1>绝对定位解决方案</h1> ?????????<p> ???????????这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 ?????????</p> ???????</div> ???????<div class="right"></div> ?????</article> ???</section> ?</body></html>3、flexbox布局
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????html * { ???????margin: 0; ???????padding: 0; ?????} ?????.layout article div { ???????min-height: 100px; ?????} ?????.layout.flexbox .left-center-right { ???????display: flex; ?????} ?????.layout.flexbox .left { ???????width: 300px; ???????background: red; ?????} ?????.layout.flexbox .center { ???????flex: 1; ???????background: green; ?????} ?????.layout.flexbox .right { ???????width: 300px; ???????background: yellow; ?????} ???</style> ?</head> ?<body> ???<section class="layout flexbox"> ?????<article class="left-center-right"> ???????<div class="left"></div> ???????<div class="center"> ?????????<h1>flexbox解决方案</h1> ?????????<p> ???????????这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 ?????????</p> ???????</div> ???????<div class="right"></div> ?????</article> ???</section> ?</body></html>4、表格布局
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8" /> ???<title>Layout</title> ???<style> ?????html * { ???????margin: 0; ???????padding: 0; ?????} ?????.layout article div { ???????min-height: 100px; ?????} ?????.layout.table .left-center-right { ???????width: 100%; ???????display: table; ???????height: 100px; ?????} ?????.layout.table .left-center-right>div { ???????display: table-cell; ?????} ?????.layout.table .left { ???????width: 300px; ???????background: black; ?????} ?????.layout.table .center { ???????background: green; ?????} ?????.layout.table .right { ???????width: 300px; ???????background: burlywood; ?????} ???</style> ?</head> ?<body> ???<section class="layout table"> ?????<article class="left-center-right"> ???????<div class="left"></div> ???????<div class="center"> ?????????<h1>表格布局解决方案</h1> ?????????<p> ???????????这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 ?????????</p> ???????</div> ???????<div class="right"></div> ?????</article> ???</section> ?</body></html>5、网格布局
如何使用CSS进行网页布局（HTML/CSS）
原文地址：https://www.cnblogs.com/fengxiongZz/p/8146641.html