CSS实现等高

最新推荐文章于 2022-06-14 08:14:39 发布

_若如

最新推荐文章于 2022-06-14 08:14:39 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css

本文链接：https://blog.youkuaiyun.com/lruoru/article/details/40504599

Web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用CSS实现自适应布局的方法，通过特定的样式设置使不同宽度的内容区域能够保持等高，同时探讨了不同元素对整体布局的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style type="text/css">
body{background:#000;color:#FFF;}
.box,.l,.c,.r{float:left;}
.l,.c,.r{width:200px; margin:10px 10px;}
.l{border:1px solid #F00;}
.c{border:1px solid #0F0;}
.r{border:1px solid #00F;}

.box{overflow:hidden; border:1px solid #FFF;}
.l,.c{padding-bottom:10000px; margin-bottom:-10000px;}
</style>

</head>

<body>

<div class="box">
    <div class="l">
    	<p>自适应</p>
        <p>自适应</p>
        <p>自适应</p>
        <p>自适应</p>
        <p>自适应</p>
        <p>自适应</p>
    </div>
    <div class="c">
    	<p>自适应</p>
        <p>自适应</p>
    </div>

</div>

<div class="r">
	<p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
    <p>自适应</p>
</div>

</body>
</html>

在box内部有l层和c层，因为box以及l，c层的设置（下面的关键代码），所以box会被内部l，c之间最高的层撑开，另一个随之自动向下填充。

r层因为不在box层，所以无法参与在box内部的自适应，无法影响box的整体效果。

如果参与自适应的层其一有最小的高度限制时候，建议设置min-height。

关键代码：

box：overflow:hidden 隐藏溢出部分，如果内容溢出box容器，则不显示。

.l,.c：margin-bottom：-10000px

.l,.c：padding-bottom：10000px

上面这几句能够实现的效果就是，产生10000px的距离，然后用负的边距把它给抵销掉。

但是注意！padding是对文字起作用的，背景颜色不受影响，box内部的l，c层列仍然是等高。

只要最长的列和最短的列相差不超过10000px，等高的视觉效果就不会被破坏。

问题1：
如果r层不设置padding和marign与l层c层都在box内部会有怎样效果？

情况1：
r层非最高情况下：
效果：