【html】---布局----三列 局------四种布局方式
一、中间定宽、左、右侧百分比自适应:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #left, #right { float: left; width: 50%; margin: 0 0 0 -150px; height: 200px; } #middle { float: left; width: 300px; background: #CCC; height: 200px; } #innerLeft, #innerRight { margin: 0 0 0 150px; background: #EFEFEF; } </style> </head> <body> <div id="left"> <div id="innerLeft"> <p>div三列布局的左列</p> </div> </div> <div id="middle"> <div id="innerMiddle"> <p>div三列布局的中列</p> </div> </div> <div id="right"> <div id="innerRight"> <p>div三列布局的右列</p> </div> </div> </body> </html>
二、左侧定宽,中、右侧百分比自适应:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #left { float: left; width: 300px; margin: 10px 10px 0 0; } #rightContent { margin-left: 300px; } #middle { float: left; width: 50%; } #right { float: left; width: 50%; } </style> </head> <body> <div id="left"> <div id="innerLeft"> <p>div三列布局的左列</p> </div> </div> <div id="rightContent"> <div id="middle"> <div id="innerMiddle"> <p>div三列布局的中列</p> </div> </div> <div id="right"> <div id="innerRight"> <p>div三列布局的右列</p> </div> </div> </div> </body> </html>
三、左、右侧定宽,中间百分比自适应:
1、HTML代码:
<div id="left"> <div id="innerLeft"> <p>div三列布局的左列</p> </div> </div> <div id="middle"> <div id="innerMiddle"> <p>div三列布局的中列</p> </div> </div> <div id="right"> <div id="innerRight"> <p>div三列布局的右列</p> </div> </div>
2、CSS代码:
#left { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } #middle { height: 200px; margin-left: 200px; margin-right: 200px; } #right { position: absolute; top: 0; right: 0; width: 200px; height: 200px; }
四、左、中定宽,右侧百分比自适应:
1、HTML代码:
<div id="leftContent"> <div id="left"> <div id="innerLeft"> <p>div三列布局的左列</p> </div> </div> <div id="middle"> <div id="innerMiddle"> <p>div三列布局的中列</p> </div> </div> </div> <div id="right"> <div id="innerRight"> <p>div三列布局的右列</p> </div> </div>
2、CSS代码:
#leftContent { float: left; width: 500px; height: 200px; background: #CCC; } #left, #middle { float: left; width: 50%; } #right { margin-left: 500px; height: 200px; }
1、路在何方?
路在脚下
2、何去何从?
每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。
如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。