面试题求解
1. 用 标准div+css的方式书写出以下代码 :
注： Left颜色为#8fc41f宽度为100px;
Main颜色为#fffaba宽度自适应;
Right颜色为#00b7ef宽度100px;
Html文档流必须从Main开始然后才是两侧
----------------------------------------------------
以上我只想到了把main和left加到DIV中然后FLOAT：left;ringht的float:ringht；请问这个思路对吗？
0io浏览 1993回答 7
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布局吗?
随时随地看视频慕课网APP
Html/CSS