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

简介: ①情景: 有一父容器div,其高和宽不定,称之为P; 该父容器有两个子div,左右布局,左定宽,满高,右自适应剩余区域; 其中,定宽称之为A,变宽称之为B; A和B是等高的; P必然能容纳A和B   可能的附加条件: 【1】A和B的宽高度可能不会撑满P,即上下左右都可能留有空隙,但这些空隙的宽或者高是已知的; 【2】A和B之间可能有一定间隙;   备注: 【1】左自

情景:

有一父容器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属性

目录
相关文章
|
22天前
|
编解码 前端开发 JavaScript
.NET_web前端框架_layui_栅格布局
【8月更文挑战第27天】
34 4
|
7天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
1月前
|
存储 JavaScript 前端开发
vue前端自适应布局,一步到位所有自适应
【8月更文挑战第9天】在Vue前端实现全面自适应布局颇具挑战,但可通过多种方法达成接近目标的效果。首先,结合BootstrapVue或Element UI等响应式框架简化布局实现过程;其次,利用Sass或Less等预处理器增强CSS编写灵活性;再者,发挥Vue的响应式特性,动态调整组件尺寸与位置;同时采用Flexbox及媒体查询技术确保不同屏幕尺寸下的一致体验;针对移动设备,采取移动优先策略并使用专门框架优化表现;最后,多平台测试与细致调优保证布局效果。综合运用上述策略,可在复杂多变的设备环境中打造近乎完美的自适应布局。
|
19天前
|
图形学 开发者
【Unity光照艺术手册】掌握这些技巧,让你的游戏场景瞬间提升档次:从基础光源到全局光照,打造24小时不间断的视觉盛宴——如何运用代码与烘焙创造逼真光影效果全解析
【8月更文挑战第31天】在Unity中,合理的光照与阴影设置对于打造逼真环境至关重要。本文介绍Unity支持的多种光源类型,如定向光、点光源、聚光灯等,并通过具体示例展示如何使用着色器和脚本控制光照强度,模拟不同时间段的光照变化。此外,还介绍了动态和静态阴影、全局光照及光照探针等高级功能,帮助开发者创造丰富多样的光影效果,提升游戏沉浸感。
36 0
|
19天前
|
开发者 图形学 Java
Unity物理引擎深度揭秘:从刚体碰撞到软体模拟,全面解析实现复杂物理交互的技巧与秘诀,助你打造超真实游戏体验
【8月更文挑战第31天】物理模拟在游戏开发中至关重要,可让虚拟世界更真实。Unity作为强大的跨平台游戏引擎,内置物理系统,支持从刚体碰撞到布料模拟的多种功能。通过添加Rigidbody组件,可实现物体受力和碰撞;使用AddForce()施加力;通过关节(如Fixed Joint)连接刚体以模拟复杂结构。Unity还支持软体物理,如布料和绳索模拟,进一步增强场景丰富度。掌握这些技术,可大幅提升游戏的真实感和玩家体验。
29 0
|
27天前
|
前端开发 开发者 UED
Web前端布局的救赎:掌握清除浮动的艺术,告别布局混乱!
【8月更文挑战第23天】在Web前端开发中,浮动(float)是一种常用的CSS布局技术,但会导致父元素高度塌陷。清除浮动至关重要,常用方法包括:使用额外的清除元素、伪元素、`overflow`属性、`flexbox`布局、`grid`布局以及`clearfix`方法。每种方法各有优缺点,适用于不同场景。随着新技术的发展,开发者应持续学习,选择合适的方法以确保布局稳定性和提升用户体验。
25 0
|
27天前
|
前端开发 容器
揭秘Web前端布局秘籍:浮动,那个让你又爱又恨的布局神器,你真的了解它吗?
【8月更文挑战第23天】在Web前端设计中,浮动是一种关键布局技术,能让元素在文档流中灵活移动,实现文本环绕图片、多列布局等效果。元素通过CSS的 `float` 属性脱离正常文档流并移动到容器边缘,后续非浮动内容则围绕该元素排列。浮动可用于多列布局、导航菜单及图文混排。需注意清除浮动以避免布局问题,并处理可能导致的父元素高度塌陷。
31 0
|
2月前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
2月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
23 0
|
4月前
|
前端开发 容器
前端 CSS 经典:grid 栅格布局(下)
前端 CSS 经典:grid 栅格布局(下)
42 0