html
<div class=‘demo‘> <div class="left">left</div> <div class="right">right</div> </div>
公用css:
.left { width: 200px; background-color: red; } .right { width: 100%; height: 200px; background-color: blue; }
1 利用css3 flex
css:
.demo{ display: flex; } .demo .right{ flex:1; }
2 左边浮动
.demo{ overflow: hidden; } .demo .left{ float: left; }
3 左右都浮动 使用calc计算右边的宽度
.demo{ overflow: hidden; } .demo .left{ float: left; } .demo .right{ float: left; width: calc(100% - 200px); }
使用css3 flex,还可以实现,左边的高度随右边的高度而变化;
原文:https://www.cnblogs.com/xiaofenguo/p/10840262.html