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

---恢复内容开始---

传说中的双飞燕布局?好吧

预期效果。

左右两侧 固定像素100px,中间自适应剩余区域

1. 左float + 右float + 中 设为BFC(overflow:hidden)

注意不可用clear属性,此外 main区域需要位于left right之后

HTML结构

        <div class="left">左</div>
        <div class="right">右</div>
        <div class="main">content area</div>

CSS

    .container {
        height:100%;

        .left {
            float: left;
            height: 100%;
            width:100px;
            background-color:lightblue;
        }
        .right {
            float: right;
            height: 100%;
            width:100px;
            background-color:lightgreen;
        }
        .main {
            height:100%;
            overflow:hidden;
            background-color:lightpink;
        }
    }

2. 左absolute + 右absolut + 中margin

HTML结构 left right 和 main,顺序可以随意调换

    .container {
        height:100%;
        position:relative;

        .left {
            position:absolute;
            left:0;
            top:0;
            height: 100%;
            width:100px;
            background-color:lightblue;
        }
        .right {
            position:absolute;
            right:0;
            top:0;
            height: 100%;
            width:100px;
            background-color:lightgreen;
        }
        .main {
            height:100%;
            margin:0 100px;
            background-color:lightpink;
        }
    }

3. 左 margin-left负值 + 右 margin-left负值 + 中包裹一层

        <div class="main">
            <div class="content">content area</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
        .left {
            float: left;
            width: 100px;
            height: 100%;
            background-color: lightblue;
            margin-left:-100%;
        }
        .right {
            float: left;
            height: 100%;
            width: 100px;
            background-color: lightgreen;
            margin-left:-100px;
        }
        .main {
            width: 100%;
            height: 100%;
            float: left;

            .content {
                margin:0 110px;
                background-color:lightpink;
                height:100%;
            }
        }

有关于margin负值的问题,之后再整理吧

四. 中margin + 左float + 右float

  和第一种方法类似,但是main需要位于 左右两栏之后。不然的话,main块先行占据了第一列,左右两栏只能在下方布局。

  此外,要千万注意clear属性

    <div class="container">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="main">content area</div>
    </div>
    .container {
        .left {
            float: left;
            width: 100px;
            height: 100%;
            background-color: lightblue;
        }
        .right {
            float: right;
            width: 100px;
            height: 100%;
            background-color: lightgreen;
        }
        .main {
            margin:0 100px;
            background-color:lightpink;
            height:100%;
        }
    }

---恢复内容结束---

时间: 2024-10-29 10:47:07

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

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

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

双栏布局 左边固定右边自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

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

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

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

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

中间固定 两边平分的 自适应三栏布局

NEC 和网上有很多关于两栏三栏布局的案例,而关于三栏布局大体为: 两边固定大小 中间自适应: 无意中一个朋友问我: 中间固定 两边平分的 自适应三栏布局 怎么实?! 当时第一时间想到的是用 display: flex; 然而这个属性不是全兼容的,目前市场上一些国产机的浏览器 实现不了想要的结果: 回去细想后觉得用position是个方法——不管怎样这是在布局中被我用坏了的属性,总能帮我解决很多问题! 以下是贴出的代码: <style> *{ padding: 0; margin: 0; }

三栏布局(二)-------上下宽高固定,中间自适应

上一篇写的是左右宽高固定,中间自适应,根据上一篇的内容,总结了下上下宽高固定,中间自适应的几种布局方式,话不多说,直接上代码. <!DOCTYPE html> <html> <head> <title>上中下三栏布局</title> <style type="text/css"> html * { padding: 0; margin: 0; } html, body{ height:100%; } .layout

CSS实现经典三栏布局(两侧定宽,中间自适应)

近期开始独立攻克百度前端技术学院的各项任务,之前做了两个比较复杂的页面,深深感觉基础不好,好多css的语句都是为了实现效果而去写的,出现了好多问题,而自己的解决方案也不够优,于是决定从基础开始学起,循序渐进. 第一个任务是实现一个三栏布局,外部的两栏固定宽度,中间自适应,以下是效果图: 我使用了两种方法实现以上效果:float和position 以下是float方法的CSS代码: 1 .team-inf{ 2 float: left; 3 width: 200px; 4 } 5 .logo-gr

CSS布局-三栏布局,左右宽度300px,中间自适应

tips: css中“>”是: css3特有的选择器,A>B 表示选择A元素的所有子B元素. 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代.  .a,.b{逗号指相同的css样式}:.a .b{空格指后代元素}:.a>.b{大于号指子代元素}: 一.浮动解决方案 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

css高度已知,左右定宽,中间自适应三栏布局

css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X