css布局
2015-12-07 本文已影响0人
寿_司
- 左边定宽，右边宽度自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .left{
background-color: #44D207;
height: 300px;
width: 200px;
float: left;
}
.right{
margin-left: 200px;
height: 300px;
background-color: #E71217;
}*//*方法一*/
.left{
background-color: #44D207;
height: 300px;
width: 200px;
float: left;
margin-right: -100%;
}
.rright{
margin-left: 200px;
background-color: #e71217;
height: 300px;
}
.right{
float: left;
width: 100%;
}/*方法二*/
</style>
</head>
<body>
<div class="contain">
<div class="left"></div>
<div class="right">
<div class="rright"></div>
</div>
</div>
</body>
</html>
- 等高自适应，两列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.left{
background-color: #44D207;
width: 200px;
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.right{
margin-left: 200px;
background-color: #E71217;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.contain{
overflow: hidden;
position: relative;
}
.left-bottom{
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 200px;
background: #000;
}
.right-bottom{
position: absolute;
bottom: 0;
right: 0;/*根据具体情况改变*/
height: 1px;
width: 200px;
background: #000;
}
</style>
</head>
<body>
<div class="contain">
<div class="left">
<p>halou</p>
<div class="left-bottom"></div>
<!-- 用这些来模拟底部边框，假如必要的话 -->
</div>
<div class="right">
<div class="right-bottom"></div>
</div>
</div>
</body>
</html>
