【分享】CSS布局多列等高写法

最新推荐文章于 2025-07-22 00:16:16 发布
最新推荐文章于 2025-07-22 00:16:16 发布
阅读量64 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： xhtml
原文链接：http://www.cnblogs.com/idche/archive/2010/04/28/1722647.html
本文介绍了一种兼容IE6/7/8及现代浏览器的多列等高布局方法，利用正内下边距与负外下边距相结合的技术实现各列高度统一，确保页面美观与一致性。

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

 这个写法不是我发明的。也是在网上找了写资料写出来的。经过测试 兼容ie 6 7 8 FF 谷歌浏览器！

主要思路是：正内下边距+负外下边距

 

.e {padding-bottom: 32767px; margin-bottom: -32767px;} 




 


完整代码：


 


ContractedBlock.gifExpandedBlockStart.gif代码



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多列等高 idche</title>
<style type="text/css"> 
.main {overflow: hidden; width: 800px; margin: 0 auto;} 
.left {float: left; width: 250px;} 
.center {float:left; margin-left:5px; width:295px;} 
.right {float: right; width: 245px;} 
.e {padding-bottom: 32767px; margin-bottom: -32767px;} 
.box {background: #F5E2AF; border: 1px #FB9D51 solid;} 
</style> 


</head>

<body>

<div class="main">
<div class="left e">
<div class="box">123546<br/></div>
<div class="box">123546<br/>123546<br/>123546<br/></div>
<div class="box">123546<br/></div>
<div class="box e">123546<br/>123546<br/>123546<br/>123546<br/>123546<br/>123546<br/></div>
</div>
<div class="center e">
<div class="box">123546<br/>123546<br/></div>
<div class="box">123546<br/></div>
<div class="box">123546<br/>123546<br/></div>
<div class="box e">123546<br/>123546<br/>123546<br/>123546<br/></div>

</div>
<div class="right e">

<div class="box">123546<br/>123546<br/></div>
<div class="box">123546<br/>123546<br/>1235412354123546<br/></div>
<div class="box">123546<br/>123546<br/></div>
<div class="box e">123546<br/></div>
</div>
</div>


</body>
</html>






 


 


 


 


 




 


 


转载于:https://www.cnblogs.com/idche/archive/2010/04/28/1722647.html

                

        




    

    
  



    



                



	

		

			

				
					
CSS多列布局方案

				
			

			

				

					吴小粥的博客
				

				

					10-16
					
					404
					
				

			

		

		

			
				
css多列布局方案

			
		

	



                

            
              



	

		

			

				
					
左右等高布局

				
			

			

				

					小王的技术库
				

				

					12-19
					
					5811
					
				

			

		

		

			
				
作为这个专栏的开篇，简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时，经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码，当遇到一些特殊情况时，界面显示就有可能出现问题。其中，最常见的问题就是文字太长时会“撑爆”容器。当然，还有很多其它异常情况。这个专栏打算将日常开发中比较常遇到的 css 布局场景一个个梳理出来。一方面，可以沉淀之前团队中做代码 review 的成果；

			
		

	



              


  
              

                


	

		

			

				
					
html多行多列交错布局,css常用布局多行多列

				
			

			

				

					weixin_34853336的博客
				

				

					06-16
					
					739
					
				

			

		

		

			
				
CSS布局常用的方法：float : none | left | right 取值： none :　 默认值。对象不飘浮 left :　 文本流向对象的右边 right :　 文本流向对象的左边 它是怎样工作的，看个一行两列的例子 xhtml: CSS布局常用的方法：float : none | left | right 取值： none :　 默认值。对象不飘浮 left :　 文本流向对象的右...

			
		

	





	

		

			

				
					
由多列等高布局引发的思考

				
			

			

				

					weixin_40322503的博客
				

				

					04-27
					
					312
					
				

			

		

		

			
				
一道经典的CSS题，是面试时常考的问题之一。



相信大家都知道怎么做了，将parent设置overflow:hidden，子元素都设置超级大的padding-bottom和等量负值的margin-bottom。运用到的知识点是强大的负边距！

 

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:rela...

			
		

	



		

			
		



	

		

			

				
					
HTML多列布局事例,css 多列布局解决方案

				
			

			

				

					weixin_32701893的博客
				

				

					06-18
					
					286
					
				

			

		

		

			
				
一. 定宽 + 自适应期望效果: 左侧宽度固定, 右侧宽度自适应公共代码:html:left menuright item1right item2right item3css:html, body, p, ul, li {margin: 0;padding: 0;}div.left {background: #d2e3e3;}div.right {background: #77DBDB;}方案一:...

			
		

	





	

		

			

				
					
html5多行布局,css常用布局多行多列

				
			

			

				

					weixin_35980267的博客
				

				

					06-16
					
					714
					
				

			

		

		

			
				
CSS布局常用的方法：float : none | left | right取值：none :　 默认值。对象不飘浮left :　 文本流向对象的右边right :　 文本流向对象的左边它是怎样工作的，看个一行两列的例子xhtml:这里是第一列这里是第二列CSS:#wrap{ width:100%; height:auto;}#column1{ float:left; width:40%;}#co...

			
		

	





	

		

			

				
					
html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析

				
			

			

				

					weixin_33582089的博客
				

				

					06-03
					
					216
					
				

			

		

		

			
				
CSS布局常用的方法：float : none | left | right取值：none :　 默认值。对象不飘浮left :　 文本流向对象的右边right :　 文本流向对象的左边它是怎样工作的，看个一行两列的例子这里是第一列这里是第二列CSS:#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{...

			
		

	





	

		

			

				
					
CSS布局方案

				
			

			

				

					叫我官人
				

				

					08-03
					
					195
					
				

			

		

		

			
				
我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！

 

居中布局

 

以下居中布局均以不定宽为前提，定宽情况包含其中

 

1、水平居中

 

 

a) inline-block + text-align

 


.parent{

text-align: center;

}

.child{

display: inline-block;

}...

			
		

	





	

		

			

				
					
css布局要求,【整理】CSS布局方案

				
			

			

				

					weixin_35977770的博客
				

				

					08-04
					
					166
					
				

			

		

		

			
				
原标题：【整理】CSS布局方案我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 居中布局以下居中布局均以不定宽为前提，定宽情况包含其中1、水平居中 a) inline-block + text-align.parent{ text-align: center;}.child{ display: inline-block;}tips：此方案兼容性较好，可兼容至IE...

			
		

	





	

		

			

				
					
2024 CSS - 保姆级系列教程三 - 选择器与布局详解

				
			

			

				

					qq_37779333的博客
				

				

					11-04
					
					1020
					
				

			

		

		

			
				
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

			
		

	





	

		

			

				
					
网格布局，实现网页图片不规则排版

				
			

			

				

					YY的博客
				

				

					10-05
					
					4183
					
				

			

		

		

			
				
网格布局的各种属性，实现网页图片不规则排版

			
		

	





	

		

			

				
					
深入了解CSS：样式布局与选择器

				
			

			

				

					
				

			

		

		

			
				
CSS的作用主要是控制网页的样式和布局，通过CSS我们可以实现将内容和样式分离，使得网页结构更清晰，维护更方便，并且可以提高网页加载速度和用户体验。  ## 1.3 CSS与HTML的关系  CSS与HTML是密切相关的

			
		

	





	

		

			

				
					
CSS3弹性伸缩布局盒（Flexible Box）模型

				
			

			

				

					macanfa的博客
				

				

					07-06
					
					9260
					
				

			

		

		

			
				
主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型！除此之外，还有更头疼的是浏览器兼容性，需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。

			
		

	





	

		

			

				
					
11. HTML 中 DOCTYPE 的作用

				
			

			

				

					weixin_64684095的博客
				

				

					07-22
					
					584
					
				

			

		

		

			
				
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。

			
		

	





	

		

			

				
					
嵌入式C语言从入门到精通视频教程.zip

				
			

			

				

					08-21
				

			

		

		

			
				
目录：
1.1C语言会被淘汰吗?.mp4
1.2 如何成为嵌入式高手.mp4
1.3 搭建开发环境.mp4
1.4初识程序结构.mp4
1.5单片机程序的编译与运行简介.mp4
2.1 单片机中数据表现形式.mp4
2.2 为什么要引入数据类型.mp4
2.3 为什么要使用C99的整数类型.mp4
2.4 sizeof用法.mp4
2.5 GPIO输出速度影响什么.mp4
2.5 负数的二进制表现形式.mp4
2.6 变量的用法与注意事项.mp4
2.7 浮点型数据类型 
2.8 一个字符引入的BUG 
2.9 浮点数应用注意事项 
2.10 为什么要引入ASCII码 
3.1 C语言有哪些运算符 
3.2 算数运算符及应用案例 
3.3 算数复合赋值运算符 
3.4 增1和减1运算符及应用案例 
3.5 单片机是如何控制外设的 
3.6 牢记位运算符的口诀 
3.7 逻辑移位与算数移位的区别 
3.8 左移右移位运算应用案例 
3.9 位运算应用案例1.mp4
3.10 位运算应用案例2 .mp4
4.1 printf的基本用法.mp4
4.2 printf的精细格式控制.mp4
4.3 printf输出转义序列.mp4
5.1数据运算的类型转换.mp4
5.2数据截断和数据扩充的规则.mp4
5.3数据扩充的应用案例和总结.mp4
5.4数据运算发生溢出的危害.mp4
5.5 数据扩充案例.mp4
5.6 24000000U中的U是做什么用的?.mp4
6.1 bool数据类型.mp4
............
网盘文件永久链接

			
		

	





	

		

			

				
					
该课题为基于Matlab的人脸考勤系统。如果需要硬件结合的话，可以调取摄像头。带有人机交互界面。可以在人机交互界面的基础之上，进行相应的拓展。人脸库可以使用您自己的真实人脸库。(11).zip

				
			

			

				

					08-21
				

			

		

		

			
				
该课题为基于Matlab的人脸考勤系统。如果需要硬件结合的话，可以调取摄像头。带有人机交互界面。可以在人机交互界面的基础之上，进行相应的拓展。人脸库可以使用您自己的真实人脸库。(11).zip

			
		

	





	

		

			

				
					
该课题为基于Matlab的运动目标跟踪系统。可以实时框定运动目标。对运动目标的行为做识别。带有人机交互界面，需要在人机交互界面的基础上进行拓展(12).zip

				
			

			

				

					08-21
				

			

		

		

			
				
该课题为基于Matlab的运动目标跟踪系统。可以实时框定运动目标。对运动目标的行为做识别。带有人机交互界面，需要在人机交互界面的基础上进行拓展(12).zip

			
		

	





	

		

			

				
					
毫米波MIMO系统中基于凹度近似的功率分配.zip

				
			

			

				

					08-21
				

			

		

		

			
				
1.版本：matlab2014a/2019b/2024b

2.附赠案例数据可直接运行。

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

			
		

	





	

		

			

				
					
该课题为基于Matlab的运动目标跟踪系统。可以实时框定运动目标。对运动目标的行为做识别。带有人机交互界面，需要在人机交互界面的基础上进行拓展(21).zip

					
最新发布

				
			

			

				

					08-21
				

			

		

		

			
				
该课题为基于Matlab的运动目标跟踪系统。可以实时框定运动目标。对运动目标的行为做识别。带有人机交互界面，需要在人机交互界面的基础上进行拓展(21).zip

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值