2.2 伪等高布局

我就是我 2022-05-09 11:40 121阅读 0赞

让并列的两块内容等高

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#content{
    				width: 700px;
    				border: 1px solid;
    				margin: 0 auto;
    				overflow: hidden;
    			}
    			#content .left{
    				float: left;
    				width: 300px;
    				background: pink;
    				padding-bottom: 1000px;
    				margin-bottom: -1000px;
    			}
    			#content .right{
    				float: right;
    				width: 400px;
    				background: red;
    				padding-bottom: 1000px;
    				margin-bottom: -1000px;
    			}
    			
    			.clearfix{
    				*zoom: 1;
    			}
    			.clearfix:after{
    				content: "";
    				display: block;
    				clear: both;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="content" class="clearfix">
    			<div class="left">
    				丁香一样的颜色
    			</div>
    			<div class="right">
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    				丁香一样的芬芳<br />
    			</div>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][70]

[70]: /images/20220509/c9fc902daea54262a7c22cc5401c46d1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，121人围观）

还没有评论，来说两句吧...

相关阅读

相关等高布局01

<style> * { padding: 0; margin: 0; } ...

我不是女神ヾ/ 2024年04月19日 11:34/ 0 赞/ 7 阅读

相关手写瀑布流—345等高瀑布流布局

1.初始布局 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

古城微笑少年丶/ 2023年01月18日 09:17/ 0 赞/ 90 阅读

相关等高布局（一）

　　某公司上级考试题，当时做的时候，思想很简单，不过想了半天还是做出来了。回家以后，由于不敢心就这解出来了而奋力研究。还算研究的比较透彻，下面就是我的研究结果，分享给大家，希望

谁践踏了优雅/ 2022年11月19日 11:22/ 0 赞/ 91 阅读

相关网页上的摄影展:等高响应布局实现

[![top banner ok][]][top banner ok 1] [![前端技术][7.png]][7.png 1] 「等高响应式布局」是什么？介绍它之前，我们先

秒速五厘米/ 2022年08月27日 13:44/ 0 赞/ 68 阅读

相关等间距布局

html： <ul class="clearfix"> <li>1</li> <li>2</li>

小灰灰/ 2022年05月21日 02:47/ 0 赞/ 194 阅读

相关 2.2 伪等高布局

让并列的两块内容等高 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我就是我/ 2022年05月09日 11:40/ 0 赞/ 122 阅读

相关 css 多列等高等宽布局

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMz

Bertha 。/ 2021年11月17日 22:52/ 0 赞/ 298 阅读

相关圣杯布局+伪等高布局

===>>>：[圣杯布局][Link 1] 伪等高就是不设置三块都不设置高度，内部自适应 / 伪等高如果超出 100000px边界就失效了 /

亦凉/ 2021年08月28日 21:54/ 0 赞/ 347 阅读

相关双飞翼+伪等高

[双飞翼布局][Link 1] <!DOCTYPE html> <html lang="en"> <head> <meta

墨蓝/ 2021年08月28日 13:24/ 0 赞/ 273 阅读

相关（代码示例）css实现等高布局的三种方式

- 本篇文章给大家带来的内容是关于css实现等高布局的三种方式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 - 本文讲的等高布局是在不手动...

灰太狼/ 2021年02月01日 16:50/ 0 赞/ 604 阅读