CSS左中右自适应布局六种方案与原理

最新推荐文章于 2024-06-28 21:22:19 发布

lzqial1987

最新推荐文章于 2024-06-28 21:22:19 发布

阅读量1.1k

点赞数

分类专栏：网站常用效果响应式布局

本文链接：https://blog.csdn.net/lzqial1987/article/details/117468413

版权

本文介绍了CSS中实现左右两栏固定300px，中间栏自适应的六种方法，包括双浮动法、绝对定位法、弹性盒子、网格布局、表格布局以及CSS计算和JS计算。详细解释了每种方法的原理和适用场景，强调了flex和grid布局的推荐使用。

摘要由CSDN通过智能技术生成

css虽简单,但细节多,技巧性高,易学难精。
如何实现左右固定300px , 中间宽度自适应？

有如下结构

<div class="wrapper">
    <div class="item left">左</div>
    <div class="item right">右</div>
    <div class="item center">中</div>
</div>

公有样式, 设置高,设置左右宽度固定300px,左右为红色，中间为黄色。

.item {
    height: 400px;
}
.left,
.right {
    width: 300px;
    background: #f00;
}
.center {
    background: yellow;
}

.left {
    float: left;
}
.right {
    float: right;
}

原理： float不会完全脱离文档流,会占用原空间

MDN官方解释:该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

问：为什么 center 要放在leftr和right之后?
答：
浏览器加载页面顺序是从上到下,
left已经左浮动,right右浮动。渲染center时࿰

关注

专栏目录