纯CSS实现三列布局(两边固定,中间自适应)

看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西。

也是给我自己复习吧,以前有人问道,我还没答上来呢。==

看代码:

html:

1 <div class="top">this is top</div>
2 <div class="container">
3     <div class="left">this is left</div>
4     <div class="center">this is center</div>
5     <div class="right">this is right</div>
6 </div>
7 <div class="footer">this is footer</div>

然后是CSS:

 1 .top{
 2     width: 100%;
 3     height: 40px;
 4     background-color: #cccccc;
 5 }
 6 .footer{
 7     width: 100%;
 8     height: 50px;
 9     background-color: #abdc44;
10 }
11 /*左右固定,中间自适应*/
12 /*Start*/
13 .container{
14     width: 100%;
15     height: 100%;
16     position: relative;
17 }
18 .left{
19     position: absolute;
20     left: 0;
21     top: 0;
22     width: 400px;
23     height: 800px;
24     background-color: black;
25 }
26 .center{
27     width: auto;    /*如果没有这一句,那么,center这个div的文字就不会自动换行*/
28     margin: 0 400px;
29     height: 1000px;
30     background-color: yellow;
31 }
32 .right{
33     position: absolute;
34     top: 0;
35     right: 0;
36     width: 400px;
37     height: 900px;
38     background-color: red;
39 }
40 /*End*/    

最后是这个样子:

时间: 2024-11-05 11:40:14

纯CSS实现三列布局(两边固定,中间自适应)的相关文章

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

css布局两边固定中间自适应的四种方法

第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div> <div style="width:150px; float:left

css实现三列布局,左右固定值,中间自适应。

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p

CSS 经典三列布局

一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"> </head> <body> <div class="header">头部<

三栏布局 左右固定 中间自适应

---恢复内容开始--- 传说中的双飞燕布局?好吧 预期效果. 左右两侧 固定像素100px,中间自适应剩余区域 1. 左float + 右float + 中 设为BFC(overflow:hidden) 注意不可用clear属性,此外 main区域需要位于left right之后 HTML结构 <div class="left">左</div> <div class="right">右</div> <div c

布局-三列布局(定宽+自适应+定宽)

两侧定宽中间自适应 方案一:float+margin+(fix) 结构: 1 <div class="parent"> 2 <div class="left"><p>left</p></div> 3 <div class="center-fix"> 4 <div class="center"> 5 <p>center</p&g

CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下网站源码方法: 一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div class="box-left">        <a href="" targ

经典三列布局

html代码中,middle部分首先要放在container的最前面,然后是left,right.三列布局,中间宽度自适应,两边定宽.1.[国外]圣杯布局:左中右三列都设置浮动和相对定位,中列宽度100%占满,左右两列都有负边距,左列有左定位数,右列有右定位数.(IE6有问题) <div class="cupContainer"> <div class="middle">中列</div> <div class="l

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的