<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
方法一：定位
-->
<style>
.wrap{
width:900px;
margin:0 auto;
position: relative;
}
#left{
width:200px;
height:500px;
background: #ccffff;
position: absolute;
top:0;
left:0;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
position: absolute;
top:0;
right:0;
}
</style>
<!--
方法二： 纯浮动式
-->
<style>
.wrap{
width:900px;
margin:0 auto;
overflow: hidden;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
float: left;
}
</style>
<!--
方法三： 混合浮动+普通流
-->
<style>
.wrap{
margin:0 auto;
width:80%;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
height: 500px;
background: #ffcccc;
margin-left:200px;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left"></aside>
<section id="right"></section>
</div>
</body>
</html>
扫一扫
4029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
