CSS-布局5-Calc三列布局
2017-08-13 本文已影响0人
Java小工匠
1、实现效果
Calc实现三列布局，中间自适应，左右固定宽度。
2、实现思路
中间宽度 计算出来 ： calc(100% - 左边宽度+右边宽度）
3、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calc三列布局</title>
<style type="text/css">
body{
margin: 0px;
}
.center{
float: left;
width: calc(100% - 400px);
background: #ccc;
height: 200px;
}
.left{
float: left;
width: 200px;
height: 200px;
background: red;
}
.right{
float: left;
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="left">left 200px </div>
<div class="center">center=calc(100%-400px)</div>
<div class="right">right 200px</div>
</body>
</html>
