七种实现左侧固定,右侧自适应两栏布局的方法

本文总结了实现左侧固定、右侧自适应的两栏布局的七种方法,包括双浮动方案、双inline-block方案、绝对定位方案、BFC方案、Flex布局和Grid布局等。每种方案都有其优缺点,如需实现此类布局,可以根据实际情况选择合适的方法。
摘要由CSDN通过智能技术生成

总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。关于最终的效果,可以查看这里

常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新型布局flex layoutgrid layout

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>

基本的样式是,两个盒子相距20px, 左侧盒子宽 120px,右侧盒子宽度自适应。基本的CSS样式如下:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

下面的代码都是基于这套基本代码做覆盖,通过给容器添加不同的类来实现效果。

inline-block方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    // 消除空格的影响
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-a
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值