自适应两列布局

时间：2023-03-31 11:56:16 CSS

方法一：浮动布局html部分

CSSpart.main{位置：相对的;宽度：100%；高度：100%；}.right{宽度：100%；高度：100%；背景：#4caf50;}.left{宽度：200px;高度：100%；背景：#4a1362；:left;}方法二：绝对定位1.绝对定位在左边，在右边设置padding-lefthtml部分

<csspart.main{position:relative;宽度：100%；高度：100%；}.right{位置：相对；宽度：100%；高度：100%；背景：#4caf50；}.left{位置：绝对；顶部：0；宽度：200px；高度：100%；背景：#4a1362；}2、右边是绝对定位，右边的padding和上面的css部分一样.main{position:relative;宽度：100%；高度：100%；}.right{位置：绝对；左填充：200px；顶部：0；宽度：100%；高度：100%；背景：#4caf50；}.left{位置：相对；00像素；高度：100%；background:#4a1362;}方法三：flex布局html部分csspart.main{位置：相对；宽度：100%；高度：100%；显示：flex;}.right{宽度：100%;高度：100%；背景：#4caf50；}。左{宽度：200px；高度：100%；伸缩收缩：0；background:#4a1362;}flex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，item会收缩。如果改为0，则不会因为空间不足而收缩，详见flex布局

上一篇：开发系统需要注意的css问题

下一篇：使用inline-block时出现元素上下偏移的问题

自适应两列布局相关文章