如何使用CSS布局左右两栏？

html-css022

如何使用CSS布局左右两栏？,第1张

#left,#right{float：left}

<div id=left></div>

<div id=right></div>

浮动型设置为left 就可以使下面的2个DIV采用左右两栏的形式布局了！！

如果2个DIV过宽 那么会另起一行显示！！！

左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应

左右两边定好宽度后，主要用flex:1来占满剩余空间从而实现中间自适应

使用table不仅可以在实现页面自适应的部分，还可以用table-cell来实现对行锤值对齐

4.float+margin实现三列布局

把左右两边的宽度固定然后左右浮动，中间自适应部分用margin：0 和 左右两边的宽度

给左右两边设置相对定位，并分别设置距离页面距离为0，中间自适应部分通过margin：0 左右宽度 来自适应

主要是使用grid-template-columns这一属性时中间的盒子自适应，这一属性定位列属性，比如要定义三列就写3个数值，每个数值代表每一个项目的宽度，auto是自适应占满剩余空间