css布局,面試時經常問的布局
阿新 • • 發佈:2017-05-30
ont 固定 idt oat 高度自適應 align min lin container
左側寬固定200,高度自適應,右側的框寬度都自適應
<style>
* {
margin: 0;
padding: 0;
}
html {
height: auto;
}
body {
margin: 0;
padding: 0;
}
#container {
background: #ffe3a6;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等於左邊欄的寬度值==*/
position: relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等於左邊欄的寬度值==*/
position: relative;
}
#main {
float: left;
}
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>
css布局,面試時經常問的布局