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>
网友评论