在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?
首先给出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如何实现左侧宽度固定,右侧宽度自适应的布局?的更多相关文章
- css之页面三列布局之左右两边宽度固定,中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- css实现左侧固定宽度,右侧宽度自适应
#centerDIV { height: 550px; width: 100%; } #mainDIV { height: 100%; border: 1px solid #F00; margin-l ...
- 布局:上下两个div高度固定,中间自适应
需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...
- css布局------左右宽度固定,中间宽度自适应容器
HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...
- CSS三列自适应布局(两边宽度固定,中间自适应)
https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- VFP获取 SQL Server 的数据表、触发器、存储过程、视图等脚本
本文代码转载自红雨先生 *-----------------------------------------------* SqlServer 相关函数*----------------------- ...
- 杭电1007-----C语言实现
这道题花了好久的时间才做出来,刚开始没有思路,最后看了网上的解答,好难得样子,每次都没有看完,但是掌握了大概思想,今天试着做了一下,已ac 主要思想:先将点对按照x排序,再在x排好序的基础上按照y来排 ...
- C#设计模式学习笔记:(11)享元模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7792973.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲结构型设计模式的第六个模式--享 ...
- C# 数据类型详解以及变量、对象与内存
学习刘铁猛老师<C#语言入门详解>视频,针对其中重点知识点进行总结. 1.什么是类型? 类型又称为数据类型(Data Type),数据类型在数据结构中的定义是一个值的集合以及定义在这个值集 ...
- 二进制、十六进制理解及int类型二进制存储方式
二进制 0000 0000 0000 0000 0000 0000 0000 0001 // 2^0 0000 0000 0000 0000 0000 0000 0000 0010 // 2^1 00 ...
- Javascript 基础学习(五)js 的运算符
通过运算符可以对一个或多个值进行运算,并且一定有运算结果返回 算数运算符 算数运算符包括相加(+).相减(-).相乘(*).相除(/).取模(%).任何值与字符串相加都会转换为字符串,做的是字符串 ...
- Android Studio 学习笔记(五):WebView 简单说明
Android中一个用于网页显示的控件,实际上,也可以看做一个功能最小化的浏览器,看起来类似于在微信中打开网页链接的页面.WebView主要用于在app应用中方便地访问远程网页或本地html资源.同时 ...
- 「Flink」Flink 1.9 WebUI运行作业界面分析
运行作业界面 在以下界面中,可以查看到作业的名称.作业的启动时间.作业总计运行时长.作业一共有多少个任务.当前正在运行多少个任务.以及作业的当前状态. 这里的程序:一共有17个任务,当前正在运行的是1 ...
- 「数据挖掘入门系列」Python快速入门
Python环境搭建 本次入门系列将使用Python作为开发语言.要使用Python语言,我们先来搭建Python开发平台.我们将基于Python 2.7版本.以及Python的开发发行版本Anaco ...
- 【USACO】JZOJ,Luogu P2690 接苹果 (dp-线性动规)
同步于CSDN:戳这里QAQ 来源:Luogu P2690,JZOJ 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为 \(1\) 和 \(2\)), 每一棵树上都长满了苹果. ...