<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #D66464;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
}
.center {
background: #FFFFFF;
margin-left: 110px;
margin-right: 160px;
height: 150px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div>
<div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
.wrap {
background-color: #FBD570;
margin-left: 100px;
margin-right: 150px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
}
.left {
float: left;
width: 100px;
background: #00f;
height: 180px;
margin-left: -webkit-calc(-100% - 100px);
margin-left: -moz-calc(-100% - 100px);
margin-left: calc(-100% - 100px); //减号两边必须有空格
}
.right {
float: right;
width: 150px;
background: #0f0;
height: 200px;
margin-right: -150px;
}
.center {
background: #B373DA;
height: 150px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
<div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
<div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
</div>
</body>
</html>
时间： 2024-10-01 05:26:19