两列布局---左侧自适应,右侧固定

方法一:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
 <style>
   .wrapper {
     /* width: 500px; */
     border: 1px solid green;
     display: table;
   }
   .left {
     display: table-cell;
     background: #000;
     width: 5000px
   }
   .right {
     float: right;
     width: 100px;
   }
  
  </style>
</head>
<body>
<div class="wrapper">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

方法2:flex布局

方法3:把right写在left前面,让right右浮动;
http://jsbin.com/bovakuduxi/edit?html,css,output

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容