CSS 布局实现左边固定宽度，右边占满剩余宽度

作者: rayman_v | 来源:发表于2017-06-13 02:18 被阅读1455次

CSS 布局实现左边固定宽度，右边占满剩余宽度
左右布局
常见技术问题及答案（一）
容器左右布局方法
常用布局使用felx布局来实现
2020-06-12 面试
两栏&三栏&双飞翼&圣杯
布局
CSS占满剩余宽度
CSS两栏布局(四种方法)

float 浮动

<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red;  }
.s1 {}
.s1 .left{float: left; }
.s1 .right{overflow: hidden;}
.s1 .clear{clear: both;}
</style>
<div class="container s1">
      <div class="left">左边左边左边左边左边左边左边左边左边左边左边左边</div>
      <div class="right">右边右边右边右边右边右边右边右边右边右边右边右</div>
      <div class="clear"></div>
</div>

浮动是最普遍实现的方式，但 css 浮动的初衷并不是用于布局的，所以浮动布局迟早会被淘汰，应该作为备选方式使用。

左边绝对定位

<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red;  }
.s2 {position: relative;}
.s2 .left{position: absolute; left: 0; top: 0;}
.s2 .right{margin-left: 100px;}
</style>
</head>
<body>
<div class="container s2">
    <div class="left">左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右</div>
</div>

绝对定位方式有个缺点，当左边高于右边时，左边会超出父元素，需要使用 js 补救。

flex 布局

<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red;  }
.s3 { display: flex; }
.s3 .left{ }
.s3 .right{flex-grow: 1;}
</style>
<div class="container s3">
      <div class="left">左边左边左边左边左边左边左边左边左边</div>
      <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
      <div class="clear"></div>
</div>

flex 是最鼓励使用的方式，低端 IE 不支持，但在移动端得到了广泛的使用。