---恢复内容开始---
马上要到秋招了，开始在牛客网上刷题，今天刷了一个阿里的16年前端笔试题的编程题：两栏布局。自己做的还是不好，所以查了资料写一下CSS中两栏布局和三栏布局
1.两栏布局
原题是“核心区域左侧自适应，右侧固定宽度 200px”
方法一：自身浮动法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #aside{ float: right; width:200px; border:1px solid red; } #content{ margin-right: 201px; border:1px solid blue; height:400px; } </style> </head> <body> <div class="con"> <div id="aside">aside-定宽200px</div> <div id="content">content-自适应宽度</div> </div> </body> </html>
方法二：margin负值法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .content{ width: 100%; float: left; height: 400px; } #left{ margin-right: 200px; background-color: aquamarine; height: 400px; } #right{ float: left; margin-left: -200px; background-color: blue; height: 400px; } </style> </head> <body> <div class="content"> <div id="left"></div> </div> <div id="right">aside-定宽200px</div> <!--<div id="middle">content-自适应宽度</div>--> </body> </html>
在自适应块left外再包一层div父层，并设置父层content左浮动，宽度为100%；子层left设置右边距为右侧right块的宽度；最后设置固定块为左浮动，设置margin-left:-200px;
2.三栏布局
方法一：绝对定位法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ width: 100%; } #left, #right{ position: absolute; top: 0px; width: 200px; height: 100%; } #left{ left: 0px; background-color: aquamarine; } #right{ right: 0px; background-color: red; } #mid{ margin: 0 200px; } </style> </head> <body> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </body> </html>
绝对定位法就是将左右栏进绝对定位，而中间栏只要设置左右margin为左右栏的宽度就可以。
方法二：margin负值法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body{ margin: 0; height: 100%; } #main{ width: 100%; height: 100%; float: left; } #body{ margin: 0 200px; height: 100%; background-color: blueviolet; } #left, #right{ width: 200px; float: left; height: 100%; } #left{ margin-left: -100%; background-color: aquamarine; } #right{ margin-left: -200px; background-color: chocolate; } </style> </head> <body> <div id="main"> <div id="body"></div> </div> <div id="left"></div> <div id="right"></div> </body> </html>
把要自适应宽度的块放在最前面，并在外面包裹一层id为main的div父层，对该父层设置左浮动，然后再对id为body的子层设置左右边距margin：0 200px；并设置左右块为左浮动；并设置左边块的左边距为-100%；右块的左边距为-200px；很奇怪，把黄色部分去掉就出不来结果，不知道这是什么原因
方法三：自身浮动法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body{ margin: 0; height: 100%; } #main{ margin: 0 200px; height: 100%; background-color: beige; } #left{ width: 200px; float: left; height: 100%; background-color: aqua; } #right{ width: 200px; float: right; height: 100%; background-color: palevioletred; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="main"></div> </body> </html>
把中间块放在最后。