常见的布局

常见布局

  • 两栏布局 左边浮动，固定宽度 / 右边自适应，不加宽度 ，加padding或margin

 

 

  • 登陆布局 定位元素居中

 

 

  • 圣杯布局——三栏布局

    1. 左右使用定位，宽度固定 /中间宽度自适应，不设置 ，加padding或margin

       

       

                 2.全部用浮动，main宽度100%，左盒子向左移动页面宽度的100% 距离，右盒子向左移动本身宽度的距离。父盒子box 左右边距分别为left，right盒子的宽度 。左右盒子 定位向左/右边移动left/right盒子的距离

 

 

  • 双飞翼布局 类似于三栏布局的第一种方法，只是将main盒子里装入一个新盒子，新盒子再设置一个左边距和右边距

 

posted @   NomNom12138  阅读(43)  评论(0)  编辑  收藏  举报
相关博文：
·  定位，子绝父相
·  居中，三角形，阴影，vertical-align，光标，边框圆角，overflow溢出部分显示效果，元素隐藏及显示，透明度opacity，collapse
·  圣杯双飞翼布局
·  CSS常见布局
·  左定右定中间自适应布局（圣杯布局）
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae