css 解决方案-等高布局

最新推荐文章于 2024-06-11 09:13:22 发布
最新推荐文章于 2024-06-11 09:13:22 发布
阅读量900 收藏
点赞数
分类专栏： css&css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruizhengyun/article/details/8681505
版权
本文通过HTML和CSS展示了如何实现等高布局，利用display:table-row和display:table-cell属性确保列的高度一致，同时提供了针对IE7-的兼容性解决方案。
摘要由CSDN通过智能技术生成 
<!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=utf-8" />  
<title>等高布局</title>  
<style type="text/css">  
*{  
    margin:0; padding:0;  
    }  
    body{  
    font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px;  
    }  
    a,img{  
    border:0 none;  
}
	
.wrap{  
    width:1000px;
    margin:0 auto;
    color:#fff;
}  
.list_row{
	line-height:30px;
	display:table-row;
	/*以下代码是为了兼容IE7-*/
	overflow:hidden;
	}
	.list_cell{
		display:table-cell; width:300px;
		padding:10px;
		text-indent:2em;
		background:#993;
		/*以下代码是为了兼容IE7-*/
		margin-bottom:-110px; *padding-bottom:110px;
		*float:left;
		
	}
	.list_special{
		widt
最低0.47元/天 解锁文章
编程之上
关注
专栏目录
CSS设计指南---页面布局
weixin_40794404的博客
06-29 1834
CSS设计指南—页面布局 教材：CSS设计指南 实现多栏布局 三种方案： 固定宽度：固定宽度布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到1100像素宽。 流动： 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。 弹性：弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了
兼容解决方案: 等高css
a1013774673的博客
11-29 87
.sl-col-equal{ 　　margin-bottom:-10000px; padding-bottom:10000px; } 转载于:https://www.cnblogs.com/wkylin/archive/2011/11/29/2268431.html
line-height行高
zhouming1107的博客
03-09 1404
line-height,文字垂直居中
CSS：行内元素的line-height
weixin_54197911的博客
05-11 867
前提：通过link重置网页默认样式 情况一： html中的代码： <body> <div class="box1"> <span class="box2">123</span> </div> </body> 不在css中设置样式，运行结果如下： 这时行内元素的font-size:16px，但其行高并没有因为重置网页样式变为1倍，还是默认的line-height:1.3125，所以.
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
CSS 使用calc()获取当前可视屏幕高度
热门推荐
Soutv - Hello Bug !
05-03 7万+
先了解一下CSS3的相对长度单位(参考详细教程) ： 相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的...
CSS布局解决方案（终结版）
02-07 143
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1）使用inline-block+text-align （1）原理、用法 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-bl...
CSS常见布局解决方案
Lunaqi的博客
07-27 325
说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。 水平居中布局 首先我们来看看水平居中 1.margin + 定宽 div class="parent">  div class="child">Demodiv>div>style>  .child {        widt
CSS基础-Flexbox布局基础
最新发布
zevjay的博客
06-11 860
Flexbox布局以其强大的灵活性和简洁的语法，已经成为现代Web开发不可或缺的一部分。通过理解和掌握上述基础概念、常见应用场景以及易错点的避免策略，开发者可以更高效地解决网页布局难题，创造出既美观又响应式的用户界面。继续实践和探索，你会发现Flexbox布局的无限可能。
css设置多列等高布局的方法示例
09-22
本文将详细讲解三种使用CSS实现多列等高布局的方法：弹性盒子布局（Flexbox）、表格单元格布局（Table-Cell）以及假等高列布局（Padding-Margin负值）。 1. **弹性盒子布局（Flexbox）** Flexbox是CSS3引入的一种...
css多种方式实现等高布局的示例代码
09-22
【CSS等高布局详解】 等高布局是一种网页设计中常见的需求，目的是使页面中的不同内容区域在不预先设定固定高度的情况下，保持相同的高度，从而达到视觉上的平衡和整洁。本文将介绍两种纯CSS方法实现等高布局：1) ...
前端应该掌握的CSS实现多列等高布局技巧
09-24
以上两种方法各有优劣，纯CSS解决方案的优点是简洁，不需要额外的JavaScript代码，且没有兼容性问题；缺点是在某些布局限制下可能无法使用。而JavaScript解决方案虽然代码稍显复杂，但它能应对更加复杂的场景，尤其...
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
5. **JavaScript解决方案**：在某些情况下，当浏览器支持不足或者需要更复杂的动态等高布局时，可以借助JavaScript来计算和设置元素的高度。这种方法需要考虑性能和兼容性问题。 在“Web-前端html+css从入门到精通 ...
css 去色
江湖再见
04-14 3万+
有这么一个样式，可以在你实现无色和加色之间游刃有余。 网站设计师在设计网页时，有时将一块图片设计成灰色，鼠标移上去，图片就有颜色。一般的逻辑是做两张图片，然后在鼠标上做图片切换事件。当然这种方法可以完美是实现，  不过有个小瑕疵，就是你要切一倍的图片（有色 + 无色）。下面介绍样式实现，可以减少一倍量的工作哦。 // HTML CSS .grayscale img{filter: g
css 实现只改变背景透明度，不改变子元素透明度
江湖再见
06-12 3377
其实就是使用rgba这个属性 显示文字
制作列表菜单的Hover效果
江湖再见
04-08 2533
HTML 目的 这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。 -- 首页 -- 照片墙 -- 语录本 CSS body { margin:0 auto; width:900px; paddin
css 解决方案-3px bug 和左浮动右侧顶部对齐
江湖再见
03-16 2015
3px bug 和左浮动右侧顶部对齐 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .w
hover的transition
江湖再见
04-07 1878
相信对于很多初学者，对于css3的transition到底是直接写在选择器上，还是写在选择器的hover上表示疑惑，下面给出两个实例，希望可以为您解惑。 demo1 demo2.demo{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #ccc; bo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值