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

纯CSS实现

效果图：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .left{

            float: left;

            width: 200px;

            height: 200px;

            background: red;

        }

        .right{

            float: right;

            width: 200px;

            height: 200px;

            background: #133;

        }

        .main{

            margin-left:200px;

            margin-right: 200px;

            background: green;

            height: 200px;

        }

    </style>

</head>

<body>

<div class="left"></div>

<div class="right"></div>

<div class="main"></div>

</body>

</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. Python开发【Django】：Admin配置管理

    Admin创建登录用户 数据库结构表: from django.db import models # Create your models here. class UserProfile(models ...

  2. docker 离线环境安装oracle

    因测试需要,需在内网的测试环境搭建一套docker Oracle 11g环境进行测试,测试环境为redhat 6.6 安装docker 1.7,本机windows 7 环境,安装docker 17.1 ...

  3. 重定向、feed输出：控制台输出的内容存放到文件

    重定向.feed输出:控制台输出的内容存放到文件 1.重定向 os.system('wget -r -p -np -k http://www.baidu.com/ -o wget.log' ) 2.f ...

  4. ThreadLocal类，实例测试，FutureTask类，实例测试。

    1:测试ThreadLocal类,  为每个线程域保存局部变量.例如下面的例子. ThreadLocal为每个线程保存了一个Test对象,  那么当执行线程时,每个线程中的test具有唯一性.某一个线 ...

  5. Spark中ml和mllib的区别

    转载自:https://vimsky.com/article/3403.html Spark中ml和mllib的主要区别和联系如下: ml和mllib都是Spark中的机器学习库,目前常用的机器学习功 ...

  6. PAT 1053 Path of Equal Weight[比较]

    1053 Path of Equal Weight(30 分) Given a non-empty tree with root R, and with weight W​i​​ assigned t ...

  7. MyBatis—mybatis-config.xml配置介绍

    在定义sqlSessionFactory时需要指定MyBatis主配置文件: Xml代码   说明: 收藏代码 1.  <bean id="sqlSessionFactory" ...

  8. js中 a : function(){}这是什么格式? 代表什么含义？怎样学习这样的格式？

    js中的json. 一种轻量级数据格式.json中的值是map形式的就是key->value. 具体看下边的示例; var person = { // 用 大括号括声明一个json. " ...

  9. Digital Image Processing 学习笔记1

    第一章 1.1 数字图像 一幅图像可以定义为一个而为函数, 其中x和y是空间坐标,而在任何一对空间坐标(x, y)处的幅值f称为图像在该点处的强度或灰度.当x, y和灰度值f是有限的离散数值时,该图像 ...

  10. 如何使用科大 mirrors 加速 pip？

    编辑 ~/.pip/pip.conf 文件(如果没有则创建之),将 index-url 开头的一行修改为下面一行: index-url = https://pypi.mirrors.ustc.edu. ...