前端的小玩意(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属性

目录
相关文章
|
3月前
|
编解码 前端开发 JavaScript
.NET_web前端框架_layui_栅格布局
【8月更文挑战第27天】
47 4
|
16天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
27 2
|
1月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 容器
前端基础(十五)_多栏布局(两列自适应布局、圣杯布局---三列布局、双飞翼布局--三列布局、等高布局)
本文介绍了前端开发中的多种自适应布局技术,包括两列自适应布局、圣杯布局(三列布局)、双飞翼布局(三列布局)和等高布局。文章通过代码示例展示了如何使用HTML和CSS实现这些布局,以及如何通过flex布局简化实现过程。
85 2
|
2月前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
图形学 开发者
【Unity光照艺术手册】掌握这些技巧,让你的游戏场景瞬间提升档次:从基础光源到全局光照,打造24小时不间断的视觉盛宴——如何运用代码与烘焙创造逼真光影效果全解析
【8月更文挑战第31天】在Unity中,合理的光照与阴影设置对于打造逼真环境至关重要。本文介绍Unity支持的多种光源类型,如定向光、点光源、聚光灯等,并通过具体示例展示如何使用着色器和脚本控制光照强度,模拟不同时间段的光照变化。此外,还介绍了动态和静态阴影、全局光照及光照探针等高级功能,帮助开发者创造丰富多样的光影效果,提升游戏沉浸感。
73 0
|
3月前
|
开发者 图形学 Java
Unity物理引擎深度揭秘:从刚体碰撞到软体模拟,全面解析实现复杂物理交互的技巧与秘诀,助你打造超真实游戏体验
【8月更文挑战第31天】物理模拟在游戏开发中至关重要,可让虚拟世界更真实。Unity作为强大的跨平台游戏引擎,内置物理系统,支持从刚体碰撞到布料模拟的多种功能。通过添加Rigidbody组件,可实现物体受力和碰撞;使用AddForce()施加力;通过关节(如Fixed Joint)连接刚体以模拟复杂结构。Unity还支持软体物理,如布料和绳索模拟,进一步增强场景丰富度。掌握这些技术,可大幅提升游戏的真实感和玩家体验。
116 0
|
3月前
|
前端开发 开发者 UED
Web前端布局的救赎:掌握清除浮动的艺术,告别布局混乱!
【8月更文挑战第23天】在Web前端开发中,浮动(float)是一种常用的CSS布局技术,但会导致父元素高度塌陷。清除浮动至关重要,常用方法包括:使用额外的清除元素、伪元素、`overflow`属性、`flexbox`布局、`grid`布局以及`clearfix`方法。每种方法各有优缺点,适用于不同场景。随着新技术的发展,开发者应持续学习,选择合适的方法以确保布局稳定性和提升用户体验。
42 0
下一篇
无影云桌面