html+CSS 设置多列登高布局示例

转载于 :https://www.jb51.net/css/637938.html#comments

css设置多列等高布局的方法示例

  发布时间:2018-09-21 15:18:09   作者:weiqinl   我要评论
这篇文章主要介绍了css设置多列等高布局的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

初始时,多个列内容大小不同,高度不同。现在需要设置不同的背景来显示,而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。

最终需要的效果:

 

1. 真实等高布局

flex 技术点:弹性盒子布局flex,默认值就是自带等高布局的特点。

定义flex布局的时候,有一些默认值。

flex-direction 属性定义主轴的方向。默认值为 row ,一般是水平显示。flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

align-item 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。默认值为 stretch ,元素被拉伸以适应容器。

?
1
2
3
4
5
< div class = "box" >
   < div class = "left" ></ div >
   < div class = "center" ></ div >
   < div class = "right" ></ div >
</ div >

css

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
   display : flex;
}
. left {
   width : 300px ;
   background-color : grey;
}
. center {
   flex: 1 ;
   background : red ;
}
. right {
   width : 500px ;
   background : yellow;
}

See the Pen equal-hight-layout-flex by weiqinl ( @weiqinl ) on CodePen .

2. 真实等高布局

table-cell 技术点:table布局天然就具有等高的特性。

display设置为 table-cell ,则此元素会作为一个表格单元格显示。类似于使用标签 <td> 或者 <th>

HTML结构

?
1
2
3
4
5
< div class = "box" >
   < div class = "left" ></ div >
   < div class = "center" ></ div >
   < div class = "right" ></ div >
</ div >

CSS样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
. left {
 
   display : table-cell ;
 
   width : 30% ;
 
   background-color : greenyellow;
 
}
 
. center {
 
   display : table-cell ;
 
   width : 30% ;
 
   background-color : gray ;
 
}
 
. right {
 
   display : table-cell ;
 
   width : 30% ;
 
   background-color : yellowgreen;
 
}

3. 假等高列布局 内外边距底部正负值

实现:设置父容器的overflow属性为hidden。给每列设置比较大的底内边距,然后用数值相似的负外边距消除这个高度。

  • 不考虑可扩展性,只需要将padding-bottom/margin-bottom ,设置为最高列与最低列相差高度值,就可以得到等高效果。
  • 考虑扩展性,为了防止将来可能某列高度大量的增加或减少,所有,我们设置了一个比较大的值。

技术点

  • background 会填充内边距 padding,而不会填充外边距 margin 。margin具有坍塌性,可以设置负值。
  • float:left。使用float,元素会脱离文档流,使其浮动至最近的文档流元素。在这里的作用是,将三个div元素并排。
  • overflow:hidden; 设置overflow属性为hidden,同时会产生 块级格式化上下文(BFC),消除float带来的影响。同时,根据需要,会截取内容以适应填充框,将超出容器的部分隐藏。

HTML结构

?
1
2
3
4
5
6
7
8
9
< div class = "box" >
 
   < div class = "left" ></ div >
 
   < div class = "center" ></ div >
 
   < div class = "right" ></ div >
 
</ div >

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box {
   overflow : hidden ;
}
.box > div{
   /**
   * padding-bottom 设置比较大的正值。
   * margin-bottom 设置绝对值大的负值。
   **/
   padding-bottom : 10000px ;
   margin-bottom : -10000px ;
   float : left ;
   width : 30% ;
}
. left {
   background-color : greenyellow;
}
. center {
   background-color : gray ;
}
. right {
   background-color : yellowgreen;
}

4. 假等高布局,背景视觉效果

技术点: float浮动,并设置每一列的宽度。设置父元素为行内块级元素,之后再利用线性渐变的图片来设置父元素的背景凸显等高的效果

CSS linear-gradient 函数用于创建一个表示两种或多种颜色线性渐变的图片。

display: inline-block ,设置为行内块级元素。

?
1
2
3
4
5
6
7
< div class = "box five-columns" >
     < div class = "col" ></ div >
     < div class = "col" ></ div >
     < div class = "col" ></ div >
     < div class = "col" ></ div >
     < div class = "col" ></ div >
</ div >

css

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/** 需要自己算出平均每列的宽度 */
 
.box {
 
   display : inline- block ;
 
   background : linear-gradient(
 
     to right ,
 
     red ,
 
     red 20% ,
 
     blue 20% ,
 
     blue 40% ,
 
     yellow 40% ,
 
     yellow 60% ,
 
     orange 60% ,
 
     orange 80% ,
 
     grey 80% ,
 
     grey);
 
}
 
.col {
 
   float : left ;
 
   width : 16% ;
 
   padding : 2% ;
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

					<p class="tip">如您对本文有所疑义或者对本文内容提供补充建议,请联系小编<a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1079426599&amp;site=jb51net&amp;menu=yes" target="_blank"><img border="0" src="https://pub.idqqimg.com/qconn/wpa/button/button_111.gif" alt="点击这里给我发消息" title="点击这里给我发消息"></a>,本站会保留修改者版权</p><div class="clearfix">
					<script type="text/javascript" src="//jscode.jbzj.com/production/ql/common/h/source/n/h/production/kmtr.js"></script>

					</div>
				<div class="jb51ewm"><div class="fl"><img src="//files.jb51.net/skin/2018/images/jb51ewm.png"></div><div class="fr"><p>微信公众号搜索 “ <span>脚本之家</span> ” ,选择关注</p><p>程序猿的那些事、送书等活动等着你</p></div></div></div><!--endmain-->
				<div class="tags clearfix">
					<i class="icon-tag"></i>
					<ul class="meta-tags">
					  <li class="tag">Tag:<a href="/do/tag/css/" target="_blank">css</a> &nbsp; <a href="/do/tag/%B6%E0%C1%D0/" target="_blank">多列</a> &nbsp; <a href="/do/tag/%B5%C8%B8%DF/" target="_blank">等高</a> &nbsp; <a href="/do/tag/%B2%BC%BE%D6/" target="_blank">布局</a> &nbsp; </li>
					</ul>
				</div>
				<div class="lbd clearfix">
					

				</div>
				<div id="shoucang"></div>
				<div class="xgcomm clearfix">
					<h2>相关文章</h2>
					<ul>
						<li class="lbd clearfix"><script type="text/javascript" src="//jscode.jbzj.com/site/g/bx_d/production/hak_cq.js"></script>
  • 前端应该掌握的CSS实现多列等高布局技巧

    我们在写页面的时候,有的时候会遇到多栏布局,这篇文章主要介绍了前端应该掌握的CSS实现多列等高布局技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟
    2018-06-05
  • 利用CSS3的flexbox实现水平垂直居中与三列等高布局

    这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局,有需要的可以参考
    2016-09-12
  • 浅析CSS等高布局的6种方式

    下面小编就为大家带来一篇浅析CSS等高布局的6种方式。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-04
  • 用CSS实现三列DIV等高布局以传达更好的视觉效果

    页面布局中经常遇到等高布局的情况,为了得到更好的视觉效果,就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说
    2014-09-03
  • 多列等高的CSS实现代码

    这种情况下就需要两列的高度保持一致了,左边高度增加,右边也跟着增加,右边高度增加,左边同样也要增加,否则就会出现“断层”的效果,接下来将介绍多列等高的实现方法,
    2012-12-03
  • CSS 三栏等高布局实现方法

    CSS网页布局实例:三栏等高布局.
    2009-08-29
  • CSS实例:CSS实现的等高网页布局

    网页制作Webjx文章简介:为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等
    2009-04-02
  • CSS实例:三列等高布局-CSS教程-网页制作-网页教学网

      三列等高CSS布局的一个实例,   修改国外的一个demo,   兼容到了IE5.5 和标准的浏览器OperaFirefoxSafari。   不过hack太多,不是很喜欢这样做。 全部代码如下
    2008-10-17
  • css多种方式实现等高布局的示例代码

    本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现各个元素高度都相当的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2019-01-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值