實現如下頁面佈局。核心區域左側自適應,右側固定寬度 200px
阿新 • • 發佈:2019-01-17
原題目:牛客網-阿里巴巴2016前端開發工程師筆試(一):10題
要求自適應,那一開始就不能把左側content的寬度給設死了。嘗試了幾次一開始思維定式就先從左至右寫吧,於是
.content {
height: 400px;
margin: 0;
margin-right: 210px;
text-align: left;
border: blue solid 2px;
}
.aside {
float: right;
border: red solid 2px;
text-align: left;
width: 196px;
/*margin-left: -210px;*/
}
<!--按照瀏覽器解析的順序從左至右寫-->
<div class="content">content-自適應寬度</div>
<div class="aside">aside-定寬 200px</div >
然而這樣就會發現aside與content始終無法再同一行顯示(content所在的div因為預設情況下獨佔一行,因此aside就算浮動也會重起一行開始往右靠),效果如下:
於是要怎麼把兩個div載入到同一行呢?display:inline、inline-block但是沒辦法設定想要的寬度高度啊。。
突然間發現float的脫離文字流屬性,只要先把content的佈局放在那,aside佈局float之後自然可以浮動在同一行的右邊了!
切記:不要清除浮動!(不然浮動作用就沒有了,content又會重起一行達不到同一行效果)
最終根據思路改成了:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0 10px;
padding: 0;
}
.header {
width: 100%;
height: 100px;
border: green solid 2px;
margin: 10px auto;
}
.logo {
width: 40px;
height: 50px;
margin: 10px;
border: purple solid 2px;
text-align: left;
}
.uname {
width: 100px;
height: 20px;
text-align: right;
margin-bottom: 10px;
margin-right: 10px;
border: purple solid 2px;
float: right;
}
.main {
height: 400px;
margin: 10px auto;
width: 100%;
}
.content {
height: 400px;
margin: 0;
margin-right: 210px;
text-align: left;
border: blue solid 2px;
}
.aside {
float: right;
border: red solid 2px;
text-align: left;
width: 196px;
}
.footer {
width: 100%;
height: 30px;
text-align: center;
border: #000 solid 2px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="uname">使用者名稱</div>
<div style="clear: both;content:''"></div>
</div>
<div class="main">
<!--實現自適應寬度可以先定好左右寬度後再寫中間div,注意順序:從上至下,從左至右的解析順序-->
<div class="aside">aside-定寬 200px</div>
<div class="content">content-自適應寬度</div>
</div>
<div class="footer">footer</div>
</body>
</html>
最終效果達成:
隨著瀏覽器視窗大小縮放,可以實現寬度自適應放大縮小了