三栏布局-中间栏流体布局的方法

时间：2023-03-30 15:32:27 CSS

方法1先用wrap包裹左中栏，再用大wrap包裹左中右栏。如下代码所示这是左边的列

这是middlecolumn

这个是右边的column

那么具体的布局代码如下。fuwrap{float:left;宽度：100%；}.ziwrap{浮动：左；宽度：100%；右边距：-250px；高度：100px；}.left{浮动：左；宽度：150px；背景色：红色；高度：98px；颜色：绿色；高度：98px；右边距：250px；左边距：150px；word-wrap:break-word}.middle*{margin-left:20px;}.right{浮动：左；th:250px;背景颜色：桃子；高度：98px；}该方法的主要思想是在布局中间列时将宽度设置为auto，保证中间列的宽度自适应。设置中间列的左边距为左边列的宽度，保留左边列的位置，将margin-right设置为与ziwrap的margin-right相反的值，使得右边的位置ziwrap布局后可以保留column，保证中间column的内容。被右栏遮挡。效果如下方法二使用绝对定位将三列用fuwrap包围起来，然后将左列定位到左上角，右列定位到右上角，不要设置中间列的宽度，并将左右边距分别设置为左右两列的宽度，就可以了。这是左栏这是中间栏这是右边栏的布局代码.fuwrap{position:relative;宽度：100%；}.left{宽度：150px；背景色：红色；高度：98px；顶部：0px；左：0px；位置：绝对；}.middle{背景颜色：绿色；高度：98px；自动换行：断字；左边距：150px；右边距：250px；}.right{宽度：250px；背景颜色：桃子；高度：98px；顶部：0px；右：0px；分区类=“fuwrap">这是左栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是右栏Layoutcode.fuwrap{width:100%;}.left{width:150px;background-color:red;height:98px;display:table-cell}.middle{background-color:green;height:98px;word-wrap:break-word;display:table-cell;}.right{width:250px;background-color:peachpuff;height:98px;display:table-cell}这个方法虽然也可以实现列流式布局，但是中间列必须有内容才能展开中间列的效果：如果内容不够展开，则会出现以下情况

上一篇：HTML入门学习总结

下一篇：Vue路由配置

三栏布局-中间栏流体布局的方法相关文章