前端css实现左侧盒子宽度固定，右侧宽度自适应布局

效果图

方法1：通过calc方法做宽度自适应

设置width: calc(100% - 100px);
（1）这里减100px是示例中有left类名的div宽度，具体减多少px根据情况来
（2）减号两侧的空格不能少，不然识别不了

<!DOCTYPE html>
<html lang="en">
<head><style>*{margin: 0;padding: 0;}.main{height: 300px;background: #ccc;}/* 左侧div */.left{/* 宽度固定100px */width: 100px;height: 100px;background: #b8e5ff;float: left;}/* 右侧div */.right{/* 100% - 100px(左侧盒子的宽度) */width: calc(100% - 100px);height: 100px;background: #d1ffd6;float: left;}</style>
</head>
<body><div class="main"><div class="left">Left</div><div class="right">Right</div></div>
</body>
</html>

方法2：通过弹性盒flex做自适应

父级容器设置display: flex;需要自适应宽度的元素设置flex: 1;

<!DOCTYPE html>
<html lang="en">
<head><style>*{margin: 0;padding: 0;}.main{height: 300px;background: #ccc;display: flex;}/* 左侧div */.left{/* 宽度固定100px */width: 100px;height: 100px;background: #b8e5ff;float: left;}/* 右侧div */.right{flex: 1;height: 100px;background: #d1ffd6;float: left;}</style>
</head>
<body><div class="main"><div class="left">Left</div><div class="right">Right</div></div>
</body>
</html>

前端css实现左侧盒子宽度固定，右侧宽度自适应布局相关推荐

html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局
又是一道前端的面试题,请实现页面布局,包括页头.内容区域.页脚三部分,其中内容区域为左右分栏,左栏定宽200px.右栏自适应宽度. 虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下. 双列 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
两边宽度固定，中间自适应的布局实现总结（重点学习网格布局）
实现左右栏宽度各为300px,中间自适应浮动属性 float: float 主要为了实现图文环绕的效果:因为float具有不完全脱离文档流的特性,虽然脱离了文档流但是仍然会保留文字的占用空间: fl ...
简单实现顶部固定，中部自适应布局
最近在重构web导航的时候就发现一个问题,如何实现顶部固定,中部自适应的布局. 很多人会认为这很简单啊,顶部使用position: fixed;就可以实现. <!DOCTYPE html> ...
前端--CSS选择器，盒子模型学习
文章目录一.CSS 1.概述 2.入门案例二.CSS选择器 1.概述 1)标签名选择器:根据属性条件选中网页中的所有元素 2)class选择器:根据class属性的选中元素(添加class属性,通 ...
前端CSS核心部分盒子模型
CSS 的元素显示模式 HTML 元素一般分为块元素和行内元素两种类型,除此之外,还包含行内块元素,也就是块元素和行内元素的特性都有常见的块元素 h1~h6 p div ol ul li 注意 ...

前端css实现左侧盒子宽度固定，右侧宽度自适应布局

效果图

方法1：通过calc方法做宽度自适应

方法2：通过弹性盒flex做自适应

前端css实现左侧盒子宽度固定，右侧宽度自适应布局相关推荐

最新文章

热门文章