两种方法实现3列布局(两端固定宽度,中间自适应)

为什么80%的码农都做不了架构师?>>>   hot3.png

第一种方法:

head
diva
divc
  divb
    
foot
#head{height: 35px;
background: #ccc;}
#diva{width: 100px;
background: red;
height: 30px;
float: left;}
#divb{
height: 30px;
background: green;
margin 0 100px;
}
#divc{height: 30px;
width: 100px;
background: yellow;
float:right;
}
#foot{height: 35px;
background: #eee;}

第二种方法:

head
diva
divb
divc
     foot
#wrap{position: relative;}
#diva{width: 100px;
background: red;
height: 30px;
position: absolute;
left: 0;
}
#divb{
height: 30px;
background: green;
margin 0 100px;
}
#divc{height: 30px;
width: 100px;
background: yellow;
position: absolute;
right: 0;
}
#foot{height: 35px;
background: #eee;}


转载于:https://my.oschina.net/mtime/blog/608593

你可能感兴趣的:(两种方法实现3列布局(两端固定宽度,中间自适应))