首先给出DOM结构

<divclass="box">
  <divclass="box-left"></div>
  <divclass="box-right"></div>
</div>

1.利用float + margin实现

.box {
height: 200px;
} .box > div {
height: 100%;
} .box-left {
width: 200px;
float: left;
background-color: blue;
} .box-right {
margin-left: 200px;
background-color: red;
}

2.利用calc计算宽度

.box {
height: 200px;
} .box > div {
height: 100%;
} .box-left {
width: 200px;
float: left;
background-color: blue;
} .box-right {
width: calc(100% - 200px);
float: right;
background-color: red;
}

3.利用float + overflow实现

 .box {
height: 200px;
} .box > div {
height: 100%;
} .box-left {
width: 200px;
float: left;
background-color: blue;
} .box-right {
overflow: hidden;
background-color: red;
}

4.利用flex实现

.box {
height: 200px;
display: flex;
} .box > div {
height: 100%;
} .box-left {
width: 200px;
background-color: blue;
} .box-right {
flex:; // 设置flex-grow属性为1,默认为0
overflow: hidden;
background-color: red;
}

在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?的更多相关文章

  1. css之页面三列布局之左右两边宽度固定,中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  2. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  3. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  4. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  5. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  6. css实现左侧固定宽度,右侧宽度自适应

    #centerDIV { height: 550px; width: 100%; } #mainDIV { height: 100%; border: 1px solid #F00; margin-l ...

  7. 布局:上下两个div高度固定,中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  8. css布局------左右宽度固定,中间宽度自适应容器

    HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...

  9. CSS三列自适应布局(两边宽度固定,中间自适应)

    https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...

  10. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. VFP获取 SQL Server 的数据表、触发器、存储过程、视图等脚本

    本文代码转载自红雨先生 *-----------------------------------------------* SqlServer 相关函数*----------------------- ...

  2. 杭电1007-----C语言实现

    这道题花了好久的时间才做出来,刚开始没有思路,最后看了网上的解答,好难得样子,每次都没有看完,但是掌握了大概思想,今天试着做了一下,已ac 主要思想:先将点对按照x排序,再在x排好序的基础上按照y来排 ...

  3. C#设计模式学习笔记:(11)享元模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7792973.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第六个模式--享 ...

  4. C# 数据类型详解以及变量、对象与内存

    学习刘铁猛老师<C#语言入门详解>视频,针对其中重点知识点进行总结. 1.什么是类型? 类型又称为数据类型(Data Type),数据类型在数据结构中的定义是一个值的集合以及定义在这个值集 ...

  5. 二进制、十六进制理解及int类型二进制存储方式

    二进制 0000 0000 0000 0000 0000 0000 0000 0001 // 2^0 0000 0000 0000 0000 0000 0000 0000 0010 // 2^1 00 ...

  6. Javascript 基础学习(五)js 的运算符

    通过运算符可以对一个或多个值进行运算,并且一定有运算结果返回 算数运算符 ​ 算数运算符包括相加(+).相减(-).相乘(*).相除(/).取模(%).任何值与字符串相加都会转换为字符串,做的是字符串 ...

  7. Android Studio 学习笔记(五):WebView 简单说明

    Android中一个用于网页显示的控件,实际上,也可以看做一个功能最小化的浏览器,看起来类似于在微信中打开网页链接的页面.WebView主要用于在app应用中方便地访问远程网页或本地html资源.同时 ...

  8. 「Flink」Flink 1.9 WebUI运行作业界面分析

    运行作业界面 在以下界面中,可以查看到作业的名称.作业的启动时间.作业总计运行时长.作业一共有多少个任务.当前正在运行多少个任务.以及作业的当前状态. 这里的程序:一共有17个任务,当前正在运行的是1 ...

  9. 「数据挖掘入门系列」Python快速入门

    Python环境搭建 本次入门系列将使用Python作为开发语言.要使用Python语言,我们先来搭建Python开发平台.我们将基于Python 2.7版本.以及Python的开发发行版本Anaco ...

  10. 【USACO】JZOJ,Luogu P2690 接苹果 (dp-线性动规)

    同步于CSDN:戳这里QAQ 来源:Luogu P2690,JZOJ 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为 \(1\) 和 \(2\)), 每一棵树上都长满了苹果. ...