两侧固定中间自适应三栏布局

第一种方法:绝对定位:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      body,html{ padding: 0; margin: 0; height: 100%;}
        .left,.right{ width: 230px; height: 100%; position: absolute; top: 0;}
        .right{ right: 0; background: green;}
        .left{ left: 0; background: blue;}
        .main{ margin: 0 230px; height: 100%; background: yellow;}
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
</html>

这种方法是最简单,也是麻烦最多的,如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。我个人现在不再建议使用这种布局。

第二种方法:浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      body,html{ padding: 0; margin: 0; height: 100%;}
        .left,.right{ float: left; width: 230px; height: 100%; background: blue;}
        .right{ float: right; }
        .main{ margin: 0 230px; height: 100%; background: yellow;}
    </style>
</head>s
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</body>
</html>

这种方法和上面的绝对定位方法很相似,只不过这里采用的是浮动,而不是绝对定位,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列的后面,

第三种方法:-marin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .main,.left,.right{ float: left; }
        .main{ width: 100%;}
        .main-inner{ margin: 0 230px; background: yellow; height: 500px; }
        .left{ margin-left: -100%; width: 230px; background: blue; height: 500px;}
        .right{ margin-left: -230px; width: 230px; background: green; height: 500px;}

    </style>
</head>
<body>
    <div class="main">
        <div class="main-inner"></div>
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>

</body>
</html>

此方法在中间div内又包含一个div让其左右留出空间又不影响整个儿浮动文本,左栏是左浮动并加了一个“margin-left: -100%”,这是因为div#left前面有一个div#main,并且其宽度为100%,这样一来在左栏定这个margin-left: -100%;刚好使左边栏定位到页面的最左边;而右栏也进行左浮动,但其定义的“margin-left”也是负值,并且等于其自身的宽度230px;

时间: 09-28

两侧固定中间自适应三栏布局的相关文章

中间固定两侧自适应三栏布局

上一种布局“中间自适应两侧固定” 用了三种方法去解决,这一种是不常见的布局格式,来看下解决方法,先看简单的解决 第一种:绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ height: 100%; padding:

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

三栏布局那些事儿

中间宽度自适应,两边宽度固定的三栏布局,是前端页面开发中极为常见网站布局方式.博主认为,一名合格的前端工程师总是会将之熟记于心.以下是博主总结的五种三栏布局的常用方法,与大家分享. 正文 1.浮动布局 浮动布局是一种极易理解,也是初学者首先想到的布局方式.仅借用CSS的float属性即可轻松实现.html代码 <div class="left">Left</div> <div class="right">Right</div

详解 CSS 七种三栏布局技巧

作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应. 下面围绕的这样的目的,即左右模块固定宽度,中间模块随浏览器变化自适应,想要完成的最终效果如下图所示: 红色

转载:CSS实现三栏布局的四种方法示例

转载网址:http://www.jb51.net/css/529846.html 前言 其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具体的介绍了三栏布局的四种方法,并介绍了它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 HTML代码如下: <div class="left&quo

负边距、三栏布局(圣杯布局、双飞翼布局)

首先来了解下 一.负边距在让元素产生偏移时和position: relative有什么区别? position:relative产生偏移时,他原来的位置不会脱离文档流的,即还占用原来的空间,但负边距产生偏移时它原来的位置并不占用空间: 例如下面的代码 Document *{ margin: 0px; padding: 0px; } .up,.down,.middle{ background-color: red; height: 100px; width: 100px; } .negative-

CSS总结(七)——常见的两栏、三栏布局

一.两栏布局 — 左栏固定宽度,右栏宽度自适应 1. 左浮动+margin <div class=“left”></div> <div class=“main”></div> css:  .left{width:200px;float:left;} .main{margin-left:200px;} ps:    IE6中可能出现双margin的bug,可以通过display:inline来解决 2.  绝对定位 + margin-left (兼容性好) &

转:CSS布局:Float布局过程与老生常谈的三栏布局

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

三栏布局,中间自适应,左右固定实现方法

方法一:浮动 <div class="container">           <div class="content">hello</div>           <div class="left"></div>           <div class="right"></div>        </div> <styl