CSS:兩欄佈局
1.直接float:left;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width:100%;
}
.left{
width:120px;
float:left;
background-color:lightpink;
}
.right{
background-color:#FF6C60;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="left">
左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
</div>
<div class="right">
這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
基本的樣式是，兩個div相距20px, 左側div寬 120px
</div>
</div>
</body>
</html>
2.absolute+margin-left；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width:100%;
position:relative;
}
.left{
width:100px;
height:200px;
background-color:cornflowerblue;
position:absolute;
}
.right{
width:100%;
height:300px;
background-color:palevioletred;
margin-left:100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
3.使用float:left+margin-left:-aside子元素寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
#header,#footer{
width:100%;
height: 100px;
overflow: hidden;/*觸發BFC*/
background-color:#CCCCCC;
}
#main .center{
height: 200px;
width: 100%;
float: left;
}
#main .center .content{
width:100%;
height:200px;
background-color:#FF6600;
margin-right:100px;
}
#main .aside{
width:100px;
height:200px;
margin-left:-100px;
background-color: #FF0000;
float:left;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div class="center">
<div class="content">
我是主區塊 我是主區塊 main main main
</div>
</div>
<div class="aside"></div>
</div>
<div id="footer">footer</div>
</body>
</html>
注意：設定浮動，center設定寬度為100%，需要優先渲染，要寫在前面；
4.使用float+overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
margin-right:20px;
float:left;
border: 5px solid #ddd;
}
.right {
overflow:hidden;
border: 5px solid #ddd;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<div class="left">
左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
</div>
<div class="right">
這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
基本的樣式是，兩個div相距20px, 左側div寬 120px
</div>
</div>
</body>
</html>
5.使用flex+flex:1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
width:100%;
display:flex;
position:absolute;
top:0;
bottom:0;
/*align-items: stretch;*/
}
.left{
/*flex:0 0 auto;*/
background-color:#FF6C60;
}
.right{
flex: 1;
background-color:#FF0000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">我是左邊</br>啦啦啦啦啦啦</div>
<div class="right">我是右邊</div>
</div>
</body>
</html>
注意：display：flex；預設align-items:stretch（拉伸）;所有子元素的高度為元素的最高高度；flex:1;即{flex-grow:1;flex-shrink:1;flex-basis:0%;}
相關文章
- CSS 兩欄佈局和三欄佈局CSS
- CSS-常見兩欄、三欄佈局（雙飛翼佈局、聖盃佈局）CSS
- CSS佈局之三欄佈局CSS
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- CSS:三欄佈局之雙飛翼佈局CSS
- CSS 三欄佈局之聖盃佈局和雙飛翼佈局CSS
- 居中佈局、三欄佈局
- 三種方法實現CSS三欄佈局CSS
- CSS三欄佈局的五種寫法CSS
- css佈局-float佈局CSS
- CSS佈局 --- 居中佈局CSS
- CSS三欄佈局的5種方法詳解CSS
- 如何實現兩欄佈局，右側自適應？三欄佈局中間自適應呢？
- 【css】佈局CSS
- css 佈局CSS
- CSS佈局CSS
- CSS佈局 --- 自適應佈局CSS
- CSS佈局 --- 等寬&等高佈局CSS
- CSS 佈局之水平居中佈局CSS
- 三欄佈局之自適應佈局
- CSS 佈局模式CSS模式
- CSS 佈局模型CSS模型
- css佈局方法CSS
- css flex佈局CSSFlex
- CSS Grid 佈局CSS
- css佈局系列1——盒模型佈局CSS模型
- CSS並不簡單：多欄佈局（Multi-Columns Layout）CSS
- 面試之CSS篇 - 實現三欄佈局的延伸面試CSS
- CSS實現可拉伸調整尺寸的分欄佈局CSS
- 三欄佈局總結
- CSS經典佈局——聖盃佈局與雙飛翼佈局CSS
- css居中與佈局CSS
- CSS 傳統佈局CSS
- CSS之居中佈局CSS
- css頁面佈局CSS
- CSS網格佈局CSS
- CSS基本佈局——定位CSS
- CSS display: flex佈局CSSFlex