标签：元素 左右两 间隙 实现 布局 width position left 200px

在前端面试中，经常会被问到两栏布局问题，即左栏宽度固定，右栏占满剩余空间。

 常见的实现方法有以下几种，最后一种不推荐：

1. 对容器元素使用flex布局，然后右侧子容器使用flex-grow:1

2. 可以采用position的相关属性，配合cacl来实现。

.wrapper{
    position: relative;
}
.left{
    width: 200px;
    height: 200px;
    background-color: green;
}
.right{
    position: absolute;
    top:0;
    left:200px;
    width: calc(100% - 200px);
    box-sizing: border-box;        
}

3. 左侧使用float:left，右侧设置margin-left，margin-left的值为左侧的宽度

4. 左右侧的元素都使用display:inline-block，然后右侧元素的width使用calc(100% - 左侧宽度)，多个inline-block元素并排时会产生空白间隙，如下图所示：

 要解决该问题，需要在父元素上设置两个css，如下

.wrapper{
font-size: 0 /*chrome下无效，因为chrome支持的最小字体为12号;在IE6/7下残留1像素间隙*/
letter-spacing: -3px; /*负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原*/
}

标签：元素,左右两,间隙,实现,布局,width,position,left,200px
来源： https://www.cnblogs.com/94pm/p/15895162.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。