谈谈css左右等高的几个方法

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:26 我要评论(0)

左右等高是我们在前面应用中会常碰到了,我们经常希望右边不会因为内容问题而导致不美观了,下面我就整理了一些css等高布局的经典例子希望对各位同学会有所帮助。

等高布局的使用场景有很多,很多时候为了满足某列的背景或者边框跟外框高度一样,并且不受其他列动态变化高度的影响。一般我会考虑几种方式:

一、负margin实现

代码如下

复制代码

.row-wrap {

overflow: hidden;

}

.row1, .row2, .row3 {

padding: 10px;

margin-bottom: -1000px;

padding-bottom: 1000px;

}

.row1{

width: 120px;

background: #F2F2F2;

float: left;

}

.row2{

width: 300px;

background: #81C0F2;

color: #FFF;

float: left;

_margin-right: -6px; //fix ie6

}

.row3{

width: 150px;

background: #FF6600;

color: #FFF;

overflow: hidden;

zoom: 1; //触发haslayout

}

<div class="row-wrap">

<div class="row1">

<p>悉尼洲际...</p>

</div>

<div class="row2">

<p>酒店离悉尼海滨...</p>

</div>

<div class="row3">

<p>在砂岩商场...</p>

</div>

</div>

这也是负margin的一个应用。这种方法是有一个缺点,就是当其中有出现锚点的时候,会出现锚点跳转错位的问题。

二、display:table-cell实现

代码如下

复制代码

.demo {

width: 600px;

}

.cell-wrap {

display:table-row;

overflow:hidden;

}

.cell {

display:table-cell;

width:30%;

margin-bottom:-100px;

padding:1.6%;

*padding-bottom:110px;

background-color:#81C0F2;

*float:left;

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...