面试题求解

7回答

李晓健

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xxx</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .main{ background-color: #fffaba; height: 100%; margin: 0 100px; } .left{ left: 0; top: 0; position: absolute; background: #8fc41f; width: 100px; height: 100%; } .right{ right:0; top: 0; position: absolute; background-color: #00b7ef; width: 100px; height: 100%; } </style> </head> <body> <div class="main">12321 32132131 2312312</div> <div class="left"></div> <div class="right"></div> </body> </html>

chen_men

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding:0; margin:0; font-size: 16px; } #container { width: 300px; margin: 0 auto; position: relative; } .left { background: #8fc41f; width: 100px; position: absolute; right: 100px; top: 0; } .right { background: #00b7ef; width: 100px; position: absolute; right: 0; top: 0; } .main { background: red; margin: 0 200px 0 0; } </style> </head> <body> <div id="container"> <div class="left">111</div> <div class="main">222</div> <div class="right">333</div> </div> </body></html>

RenneXV

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xxx</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } .demo{ display: flex; display: -webkit-flex; height: 100%; } .main{ flex: 1; background-color: red; } .left,.right{ width: 100px; } .left{ background: #8fc41f; } .right{ background-color: #00b7ef; } </style> </head> <body> <div class="left"></div> <div class="main"></div> <div class="right"></div> </body> </html>

卡迪亚兹

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .left{ width: 100px; min-height: 300px; position: absolute; left: 0; background: #8fc41f; } .right{ width: 100px; min-height: 300px; position: absolute; right: 0; background: #00b7ef; } .main{ width: 100%; min-height: 300px; position: absolute; left: 100px; background: #fffaba; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>我是用的3个都进行相对定位来达到的效果。

RenneXV

能用flex布局吗?