三种方法实现三栏网页宽度自适应布局,附加一个右边为自适应的样式。
2018-10-22 22:02 爱学习的小伟子 阅读(393) 评论(0) 编辑 收藏 举报今天来练习并总结下三种布局方式来实现三栏式布局。
以下为三种方式的html布局:
<!--方法一--> <div id="content1"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> <!--方法二--> <div id="content2"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div> <!--方法三--> <div id="content3"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>
方法一:三个盒子都向左浮动,左右的设置固定宽高,中间的宽为100%,利用负margin值将左右两个盒子顶到上面去,然后利用padding将中间盒子的文字挤出来。(这种方法可以优先渲染中间的盒子,即要在html结构中将middle放在最上面)
css代码如下:
#content1{height: 200px;margin:0 auto;width: 100%;} #content1 .middle{ height: 200px;width: 100%;background: green;text-align: center;float: left; } #content1 .left { height: 200px;width: 200px;float: left;
background: yellow;border:1px solid black;margin-left: -100%;/*这里设置负的100%的margin值,左边的盒子才会在中间盒子的左边,不然会被挤到下面去*/ } #content1 .right { height: 200px;background: red;width: 200px;float: left;
border:1px solid black;text-align: right;margin-left: -200px;/*同理,右边盒子的负margin值为自身宽度才能保证在中间盒子的右边,不然也会被挤到下面去*/ }
方法二:左边的盒子左浮动,右边的盒子右浮动,并且设置固定宽高,中间的盒子宽度为100%。这种方法要把中间的盒子排列在html结构的最后,利用浮动后脱离文档流的特性,让最底下的middle盒子能够去占据原来左右盒子的位置,使得左右两个盒子能够分别左右浮动在middle的上面,达到中间盒子宽度自适应的效果。这个方法不需要用padding值来把middle的内容挤出来,因为有浮动的环绕效果。
css代码如下:
#content2{height: 200px;margin:0 auto;width: 100%;} #content2 .middle{ height: 200px;width: 100%;background: green;border:1px solid black; } #content2 .left { height: 200px;width: 200px;float: left;background: yellow;border:1px solid black; } #content2 .right { height: 200px;background: red;width: 200px; border:1px solid black;text-align: right;float: right; }
方法3:左右的盒子分别定位至左右,并设置固定宽度,中间盒子的宽度用到两边的外边距来撑开,左右外边距最好要分别大于等于两边盒子的宽度,这样可以保证middle的内容不会被覆盖。这种方法不需要设置浮动,代码较少,原理也相对较简单些。
css代码如下:
#content3 {height: 200px;margin:0 auto;width: 100%;position: relative;} #content3 .left { height:200px;width: 200px ;position: absolute;top: 0;left: 0;background: yellow; } #content3 .right { height:200px;width: 200px ;position: absolute;top: 0;right: 0;background: red; } #content3 .middle{ margin:0px 210px;background: green;height: 200px; }
附加练习:左边的两个盒子固定宽度,最右边的自适应宽度。
方法:将左边和中间的浮动至左边并固定宽度,右边的宽度为100%
HTML代码如下:
<div id="content4"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>
css代码如下:
#content4 {height: 200px;margin:0 auto;width: 100%;} #content4 .left{ height: 200px;width: 200px;float: left;background: yellow; } #content4 .middle { height: 200px;background: green;width: 200px; border:1px solid black: ;text-align: right;float: left; } #content4 .right{ height: 200px;background: red;width: 100%; }