当前位置: 首页 > Web前端 > CSS

CSS-双栏布局

时间:2023-03-31 00:25:39 CSS

布局是面试和实际开发中经常遇到的问题。常见的有两栏布局和三栏布局。回忆之前某组面试,要求用尽可能多的方法实现左边固定宽度的两栏布局,右边自适应两栏布局。下面介绍一些最常见的实现两栏布局的方法,简单易懂,可以作为前端面试的备考资料。0、HTML结构如下:

1、使用浮动float<样式>.main{溢出:隐藏;}.left{/*左列设置为左浮动*/float:left;宽度:400px;高度:500px;背景:红色;}.right{/*右列设置一个左外间距,值为左列的宽度*/margin-left:400px;背景:蓝色;高度:500px;}2.使用定位位置