一种常见的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. ViewPager添加小圆点

    ViewPager添加小圆点很简单,但是如果是网络图片可能就不太好做了,所以我这里给出一种方法,当然你也可以用其他的 1.主界面xml <?xml version="1.0" ...

  2. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  3. Atom飞行手册翻译

    https://www.w3cschool.cn/atomflightmanualzhcn/

  4. 用tsunami-udp加速网络传输

    概述 tsunami-udp是一款专为网络加速诞生的小工具. 思路很简单,使用TCP进行传输控制.UDP进行数据传输. 这样可以无状态的进行数据传输,然后中间加一些文件校验和重传机制,达到加速传输的目 ...

  5. Spark Shuffle（三）Executor是如何fetch shuffle的数据文件（转载）

    1. 前言 在前面的博客中讨论了Executor, Driver之间如何汇报Executor生成的Shuffle的数据文件,以及Executor获取到Shuffle的数据文件的分布,那么Executo ...

  6. SpringData_Repository接口概述

    Repository 接口是 Spring Data 的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法  public interface Repository<T, ...

  7. tp模板基础

    目录简介 创建应用 在项目目录创建入口文件shop/index.php 创建虚拟主机,访问应 路由形式 路由: 系统从URL参数中分析出当前请求的分组.控制器.和操作的过程就是“路由”. Tp框架路由 ...

  8. SoapUI、Jmeter、Postman三种接口测试工具的比较

    1.  用例组织方式 首先是用例组织方式的不同,不同的目录结构与组织方式代表不同工具的测试思想,学习一个测试工具应该首先了解其组织方式. SoapUI的组织方式如下图,最上层是WorkSpace,每个 ...

  9. ubuntu18.04下挂载网络文件系统失败【学习笔记】

    作者:庄泽彬(欢迎转载,请注明作者) PC:    ubuntu18.04 说明:  之前ubuntu16.04下搭建的环境,开发板挂载网络文件系统是ok的,但是换到ubuntu18.04在启动的时候 ...

  10. 学习Zookeeper之第3章Zookeeper内部原理

    第 3 章 Zookeeper 内部原理 3.1 选举机制 3.2 节点类型 3.3 stat 结构体 3.4 监听器原理   1)监听原理详解   2)常见的监听 3.5 写数据流程 第 3 章 Z ...