等高布局实现

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量117 收藏 2
点赞数
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44995917/article/details/118328685
版权

等高布局实现方法：

  • table方法
    在这里插入图片描述

  • flex布局
    在这里插入图片描述

  • 同时等宽效果：只需加入flex：1；

  • grip布局
    在这里插入图片描述

  • padding和margin

    思路：首先把左侧的内边距的底部设置为一个很大的数值，比如9999px，左边的底部就被拉长了。接下来再把左边的外边距设置一个-9999px，父元素的边框就被拉了回来，只不过左边的内容依旧被拉长了，那是因为内边距是会把背景颜色进行延伸；正常来说我们设置正外边距会把边框往外推，设置负外边距会把边框往里推，我们要做的就是正是把原来的往外推的边框再往里推，做到padding和margin相互抵消的效果，现在内容依旧突出到外边了，我们只需要在父元素上设置BFC就可以限制内容了

等高布局实现

内容取自b站技术蛋老师

词不达意zn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS等高布局的6种方式
uffgfbft的博客
11-02 162
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！                <img
等高布局的三种方法
weixin_43700362的博客
12-11 759
等高布局一： 以三栏登高布局为例，第一栏宽30%，第二栏宽40%，第三栏宽30%。 1 几栏就写几个容器，分别为爷爷，爸爸，儿子的关系（暂时宽度都设置为100%）。 2 使用相对定位，把爸爸向左侧移动30%，漏出爷爷的30%。 3 使用相对定位，把儿子向左侧移动40%，漏出爸爸的40%。 4 在儿子里面写左中右三栏，给此三栏设置浮动，让他们在同一行显示。 5 使用相对定位，把第三栏定位到和爷爷漏出...
CSS等高布局的7种方式
weixin_34015336的博客
05-04 370
前面的话 　　等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现、grid实现和js判断这五种真等高布局   伪等高 边框模拟 　　因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素...
等高布局实现的两种方式
yangyanqin2545的博客
04-22 673
等高布局实现的两种方式： 第一种方式： （1）利用padding-bottom和margin-bottom相抵消 （2）利用paddig-bottom 撑开显示更多的背景； margin-bottom的负值抵消padding的占位； 代码的实现如下： <style> .box{ width: 600px; min-height: 400px; overflow: hidden; }
CSS实现等高布局
好记性不如烂笔头~
03-01 3621
等高布局的实现方式有很多种这介绍两种非常实用的主流的方法，如下： //html &lt;div class='box'&gt; &lt;div class='left'&gt; &lt;div class='bor'&gt;&lt;/div&gt; dasdsgerfadcdasdsfdsfdsfdsfdsfdfsdf &lt;/div&gt; ...
CSS 三栏等高布局实现方法
09-25
CSS 三栏等高布局实现方法 CSS 三栏等高布局是指在页面中实现三个等高的栏目，每个栏目的高度可以根据内容的变化而变化。本实施方法可以将三个栏目等高地排列在一起，且不需要写死高度。 首先，需要了解三栏等高...
利用margin实现等高布局
09-25
主要介绍了利用margin实现等高布局，实际上高度不相等的。只是隐藏了超出的部分，需要的朋友可以参考下
左定宽度右自适应宽度并且等高布局实现代码
09-25
左侧固定宽，右侧自适应屏幕宽;左右两列，等高布局;左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）要求不用JS或CSS行为实现,那么下面我们就先来看看如何实现
css多种方式实现等高布局
weixin_34087307的博客
01-05 268
本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图： 1、使用table-cell实现(兼容IE8) <style> body,div,ul,li{margin: 0;padding: 0;} li{list-style: none;} .table-layo...
八种创建等高列布局
AllinShang的专栏
02-20 1185
转自：http://www.w3cplus.com/css/creaet-equal-height-columns 高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道
布局技巧（等高布局）、（圣杯布局）、（双飞翼布局）
Sun__Fei的博客
08-11 141
盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化。等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。利用padding和margin负值相抵消。1.1、实现要点（需求）3.1、双飞翼实现步骤。1.2.2、实现步骤。1.3.2、实现步骤。2.2、圣杯实现步骤。...
CSS：等高布局
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
02-16 1324
方法一：使用数值非常大正padding-bottom与负margin-bottom<div id = "container"> <div id="left"></div> <div id = "right"></div> </div>*{ margin:0; padding:0; } #container{ overflow:hidden; } #left{ width:30
CSS八种方式实现等高布局
diaoleiluomulaojin的博客
08-07 448
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：     一、假等高列     这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：     Html Markup                         在制作样式之前需要一张类似下面的背景图：    
css实现等高布局 两栏自适应布局 三栏自适应布局
charlene0824的博客
04-22 4731
总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin，同时将padding的值设为正的margin值实现的 具体实现方法如下：<div class="container"> <div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负ma
两列等高布局
SuperXuyuey的博客
05-17 1895
&lt;style&gt; #dd { padding: 20px; overflow: hidden; border: 1px solid black } #d1 { float: left; width: 300px; background-color: red; padding-bottom: 200px; ...
2024年公共文化与社会服务国际会议（ICPCSS 2024）
wx19980549140的博客
07-12 1044
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 723
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 411
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 404
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值