前端的小玩意（6）——使用padding的左定宽、右自适应布局

拼搏现实的明天。 2022-07-21 01:08 166阅读 0赞

①**情景：**

有一父容器div，其高和宽不定，称之为P；

该父容器有两个子div，左右布局，左定宽，满高，右自适应剩余区域；

其中，定宽称之为A，变宽称之为B；

A和B是等高的；

P必然能容纳A和B

**可能的附加条件：**

【1】A和B的宽高度可能不会撑满P，即上下左右都可能留有空隙，但这些空隙的宽或者高是已知的；

【2】A和B之间可能有一定间隙；

** **

**备注：**

【1】左自适应右定宽方法同理；

【2】上下布局同理；

②**方法：**

原理：利用P的padding属性和A的margin属性来布局；

【1】由于P宽高不定，因此可以忽视对P的宽高设置；

【2】假设A的宽度为100px；A距离左侧10px，距离B有10px。因此，B的左侧实际有120px宽度；先设置P的css属性如下设置：

.P {
           padding-left: 120px;
           width: 略;
           height: 略;
    }

【3】设置A的CSS属性，如果要加border属性，那么需要注意A和B的box-sizing要设置为border-box

.A{
           margin-left: -110px;
           width: 100px;
           box-sizing: borer-box;
           float:left;
    }

**Note：**

《1》如果有border属性，那么content区域要对应减少border的宽度（并且如果两侧都有，那么是双倍的宽度）；

《2》必须添加float属性，以使其脱离文档流；假如抛弃float属性，而采用display:inline-block属性的话，会导致右侧的B会靠近A，而不是在我们预想的区域之中。

【4】设置B的CSS属性，没有什么特殊的，只需要设置宽高为100%即可；

.B{
           width: 100%;
           height: 100%;
           box-sizing: border-box;
    }

③如此，便能实现左定宽，右变宽的布局了；并且由于没有使用CSS3属性，并且margin的范围没有超出P的盒模型，因此相对兼容性也很好。

④**可能存在的问题：**

【1】由于使用了float属性，也许在某些版本的浏览器中可能出现问题（真有这种可能？）；

解决办法：

取消A的float属性，用以下CSS替代：

display: inline-block;         ——A和B都设置
    vertical-align: top;            ——A和B都设置
    margin-right: 若干px;     ——A设置，注意：这行的值可能并非10px，也许只有5px

【2】A的内部文字，在右侧可能溢出的问题：

解决办法：对A设置padding-right属性

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关左边定宽右边自适应

分析左侧：利用浮动\\（float：left）或绝对定位(position:absolute)\\，使左侧的块元素脱离常规文档流,可以与右边块元素并列【块级元素，默

朴灿烈づ我的快乐病毒、/ 2023年07月20日 05:49/ 0 赞/ 31 阅读

相关 flex自适应的两种布局方式；上中下，左中右布局自适应；两端固定高度或者宽度，中间自适应的布局

上中下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

女爷i/ 2022年11月16日 15:14/ 0 赞/ 396 阅读

相关前端的小玩意（4）自定义checkbox或者radio的外观

原理：通过隐藏原有的（调透明度和绝对定位），然后用一个新的图标来覆盖上去 CSS代码： .radio { /这个描述的是输入框的基本样式，透明，绝对定位，浮动在

「爱情、让人受尽委屈。」/ 2022年09月21日 13:13/ 0 赞/ 126 阅读

相关前端的小玩意（6）——使用padding的左定宽、右自适应布局

①情景：有一父容器div，其高和宽不定，称之为P；该父容器有两个子div，左右布局，左定宽，满高，右自适应剩余区域；其中，定宽称之为A，变宽称之为B； A和B是等

拼搏现实的明天。/ 2022年07月21日 01:08/ 0 赞/ 167 阅读

相关两列布局中单列定宽单列自适应布局的5种思路

前面的话　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路

妖狐艹你老母/ 2022年07月16日 00:53/ 0 赞/ 214 阅读

相关移动端布局自适应的方法

一、lib-flexible flexible毫无疑问在移动端自适应上还是很方便的，具体用法如下 1.安装flexible.js npm install lib-f

谁借莪１个温暖的怀抱￠/ 2022年05月21日 12:45/ 0 赞/ 373 阅读

相关面试准备（一）---左固定右自适应布局

左固定右自适应布局这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。现在我们来看

末蓝、/ 2022年05月19日 03:21/ 0 赞/ 226 阅读

相关【css】css实现布局：左：200px，右：30%，中：自适应

题目来源于今日头条一面，当时想的不全，现在总结一下第一种方法：浮动布局 <style> body { padding:50

绝地灬酷狼/ 2022年04月16日 06:16/ 0 赞/ 253 阅读

相关 CSS布局 -- 左右定宽，中间自适应

左右定宽，中间自适应 ![200929295746183.png][] 有几种方法可以实现改变窗口大小看看？方案一：左右设置绝对定位，定宽，中间设置margin

分手后的思念是犯贱/ 2021年12月17日 06:34/ 0 赞/ 423 阅读

相关 css实现两端定宽中间自适应的布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我会带着你远行/ 2021年12月12日 14:23/ 0 赞/ 350 阅读