一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度
方法一：浮动 注意三个div的位置
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
.left{
width: 100px;
background-color: red;
height:100%;
float:left;
}
.middle{
width:auto;
height:100%;
background-color: yellow;
}
.right{
width:100px;
background-color: blue;
float:right;
height:100%;
}
</style>
</head>
<body>
<div id="id">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
</body>
</html>
方法二：定位
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
#id{
position: relative;
}
.left{
width: 100px;
background-color: red;
height:100%;
position: absolute;
top:0;
left:0;
}
.middle{
width:auto;
height:100%;
background-color: yellow;
margin:0 100px;
}
.right{
width:100px;
background-color: blue;
height:100%;
position: absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="id">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
posted on 2018-04-12 15:39 平平淡淡summer 阅读(497) 评论(1) 编辑 收藏 举报
