如何使用CSS实现三栏自适应布的局

　　介绍

这篇文章将为大家详细讲解有关如何使用CSS实现三栏自适应布的局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强> 1。基于传统的位置和保证金等属性进行布局

这里也分为三种方法,分别为绝对定位法,圣杯布的局,自身浮动法。

<强> 1)。绝对定位法

绝对定位法原理是将左右两边使用绝对定位,因为绝对定位使其脱离文档流,后面会的中心自然流动到他们上面,然后使用保证金属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。

代码如下:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　,& lt; head> 　　& lt;才能meta  charset=癠TF-8"比; 　　& lt;才能title> layout_box</title> 　　& lt;才能link  rel=皊tylesheet",类型=拔谋?css", https://www.yisu.com/zixun/href=" . ./css/layout_box.css "> 　　头 　　<身体> 　　

实现三列宽度自适应布局

　　
　　
我是右边
　　
我是中间
　　 　　

css代码:

html,身体{,保证金:0 px;宽度:,100%;,} 　　h4{高度:100 px;保证金:20 px  0, 0;} 　　#,#对{宽度:200 px;高度:,200 px;,背景颜色:,# ffe6b8;位置:,绝对的,最高:120 px;} 　　#左{左:0 px;} 　　#吧{吧:0 px;} 　　中心#{保证金:2 px  210 px ; background:, # eee;高度:,200 px;,}

该法布局的好处,三个div顺序可以任意改变。不足是因为绝对定位,所以如果页面上还有其他内容,顶部的值需要小心处理,最好能够对css样式进行一个初始化,就像在上面例子中加了一个标题,如果不对样式进行初始化,则两边和中间的值会对不齐。另外,随着浏览器窗口缩小,小于200 px的时候,会发生压缩。
结果如图,可以看到中间栏宽度随着屏幕大小伸缩。

<强> 2)。使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用浮动:左和浮动:对的,浮动使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用保证金指定左右外边距对其进行一个定位。

HTML代码:

& lt; h4>使用自身浮动法定位& lt;/h4>=& lt; div  id “left_self"在我是左边& lt;/div>=& lt; div  id “right_self"在我是右边& lt;/div>=& lt; div  id “center_self"在我是中间& lt;/div>

css代码:

# left_self, # right_self{,宽度:200 px;高度:,200 px;,背景颜色:,# ffe6b8 } 　　# left_self {浮动:,左;} 　　# right_self{浮动:对的;} 　　# center_self{保证金:0,210 px;高度:,200 px;,背景颜色:,# a0b3d6}

该布局法的好处是受外界影响小,但是不足是三个元素的顺序,中心一定要放在最后,这是和绝对定位不一样的地方,中心占据文档流位置,所以一定要放在最后,左右两个元素位置没有关系。当浏览器窗口很小的时候,右边元素会被击倒下一行。

<强> 3)。圣杯布局

圣杯布局的原理是负利润值法。使用圣杯布局首先需要在中心元素外部包含一个div,包含div需要设置浮动属性使其形成一个黄东海,并设置宽度,并且这个宽度要和左块的保证金负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。

实现代码:

& lt; h4>使用负幅度值法进行布局& lt;/h4> 　　& lt;才能div  id =,“wrap"比; 　　,,& lt; div  id =,“center"祝辞& lt;/div> 　　& lt;才能/div> 　　& lt;才能div  id =,“left_margin"祝辞& lt;/div> 　　& lt;才能div  id =,“right_margin"祝辞& lt;/div>

CSS代码:

#包装{,宽度:100%;高度:,100 px;,背景颜色:,# fff;浮动:,左;} 　　# wrap 中心#{,保证金:0,210 px;,高度:,100 px; background:, # ffe6b8;,} 　　# left_margin, # right_margin{,浮动:离开;宽度:,200 px;高度:,100 px; background:, darkorange } 　　# left_margin  {margin-left: -100%;,背景颜色:,lightpink} 　　# right_margin {margin-left: -200 px;}

该方法在网站布局中非常常见,也是面试常考的点,优点是三栏相互关联,有一定的抗性。需要注意的是,布局中间部分一定要放在前面,左右顺序不限制。对于离开快的利润率负值一定要等于包装的宽度。
三种方法实现三栏网页宽度自适应布局方法见下图。

如何使用CSS实现三栏自适应布局

如何使用CSS实现三栏自适应布的局