一种常见的3列布局，左右两列固定宽度、中间列自适应满宽。整个网页不出现横向滚动条

纯CSS实现

效果图：

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .left{
  8.             float: left;
  9.             width: 200px;
  10.             height: 200px;
  11.             background: red;
  12.         }
  13.         .right{
  14.             float: right;
  15.             width: 200px;
  16.             height: 200px;
  17.             background: #133;
  18.         }
  19.         .main{
  20.             margin-left:200px;
  21.             margin-right: 200px;
  22.             background: green;
  23.             height: 200px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="left"></div>
  29. <div class="right"></div>
  30. <div class="main"></div>
  31.  
  32. </body>
  33. </html>

[CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽的更多相关文章

  1. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  2. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  3. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  4. 两列布局，读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  5. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  6. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  7. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

随机推荐

  1. qt——QFileDialog使用对话框选取本地文件

    QT在学习的过程中总是遇到各种问题,没有人解答,只有自己在研究并且在网上搜索一些资料,从初学到现在入门,一直都是这样走过来的,虽然走得很艰难,但是每一个阶段都会有所收获,最近在做一个图片浏览模块的功能 ...

  2. Struts,Spring,Hibernate优缺点

    Struts跟Tomcat.Turbine等诸 多Apache项目一样,是开源软件,这是它的一大优点.使开发者能更深入的了解其内部实现机制. Struts开放源码框架的创建是为了使开发者在构建基于Ja ...

  3. 103-advanced-上下文

    上下文提供了一种通过组件树传递数据的方法,无需在每个级别手动传递道具. 在典型的React应用程序中,数据通过prop自上而下(父到子)传递,但对于应用程序中许多组件所需的某些类型的道具(例如场所偏好 ...

  4. Python统计字符串中的中英文字符、数字空格，特殊字符

    # -*- coding:utf8 -*- import string from collections import namedtuple def str_count(s): '''找出字符串中的中 ...

  5. 制造抽象基类--《C++必知必会》 条款33

    抽象类,含有纯虚函数的类,不可以创建对象. 然而,有时我们并不需要某个函数定义为纯虚函数,但是任然希望此类像抽象类一样,不可以创建对象. 方法1:通过确保类中不存在共有构造函数来模拟抽象基类的性质.意 ...

  6. king 选 太子

    king 选 太子 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 啊,从前有一个国家.此国兵强马壮,但是国王却身体不好.于是就想挑一位太子出来: 但是问题来了,国王 ...

  7. MySQL从删库到跑路（一）——MySQL数据库简介

    作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.MySQL简介 1.MySQL简介 MySQL是一个轻量级关系型数据库管理系统,由瑞典MySQL AB公司开发, ...

  8. 20155331 2016-2017-2 《Java程序设计》第8周学习总结

    20155331 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了cle ...

  9. java第八天

    p41~p45: 1.区别前缀式与后缀式. public class Test { public static void main(String[] args) { int i = 1; System ...

  10. Windows10系统远程桌面连接出现卡顿如何解决

    最新的windows10系统下,用户只要开启远程桌面连接,就能够轻松地操控其他电脑.但是,最近部分用户在win10中启用远程连接时,发现电脑窗口变得非常缓慢卡顿,这是怎么回事呢?其实,该问题与系统的设 ...