左侧固定,右侧自适应的布局方式(新增评论区大佬教的方法)
一.浮动布局
1.先让固定宽度的div浮动!使其脱离文档流。
2.margin-left的值等于固定div的宽度相等。
.aside{float: left;width: 200px;background-color: red;}.content{margin-left: 200px;background-color: blue;}<div class="aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.
</div>
二.margin的负值(3个div)
- 是固定宽度的div脱离文档流。
- 利用marin负值可以使得,后面的div可以与前面的div 保持同行显示。
给包裹内容的div加margin-left 可以使得与左边的文字不重叠
``` .aside{ float: left; margin-right: -200px; width: 200px; background-color: red; } .content{ float: right; } .content .inner{ margin-left: 200px; background-color: blue; } <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> ```
</div>
三.calc()计算属性
注意:使用calc计算属性的时候 运算符(- +等等)两边必须有空格
- 注意两个div必须一左一右浮动。
calc的宽度必须要减去的宽度要与固定宽度保持一致。
``` .aside{ float: left; width: 200px; background-color: red; } .content{ calc:(100% - 200px); background-color: blue; } ```
<div class="aside">
``` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> ```
四.flex布局
- 需要给父级div设置display: flex属性。
- 固定宽度的div设置flex: 0 0 200px即可。
内容区域的div直接写出flex: 1即可。
``` .container{ display: flex; } .aside{ flex: 0 0 200px; background-color: red; } .content{ flex: 1; background-color: blue; } <div class="container"> <div class="aside"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae. </div> </div> ```
五.左侧浮动,右侧overflow:hidden
.aside{width: 200px;float: left;background-color: red;
}
.content{overflow: hidden;background-color: blue;
}
<div class="aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore provident dolor in voluptatum tempore non, placeat obcaecati totam ut delectus libero excepturi distinctio asperiores odit nobis soluta, esse aspernatur beatae.</div>
阮一峰老师写的教程权威传送门:http://www.ruanyifeng.com/blo...
原文地址:https://segmentfault.com/a/1190000016694777
转载于:https://www.cnblogs.com/lalalagq/p/9809085.html
左侧固定,右侧自适应的布局方式(新增评论区大佬教的方法)相关推荐
- 网页右边固定php,左侧固定,右侧自适应的布局方式
这次给大家带来左侧固定,右侧自适应的布局方式,左侧固定,右侧自适应布局方式的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法: Document .one { position: abso ...
- css布局 右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
- 左侧固定 右侧自适应三种方法
第一种:float 单一层浮动法 例如:左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px; 实例 ...
- 实现左侧固定宽度, 右侧自适应的两栏布局常见方法
两栏布局方案 实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览 首先统一html结构 <div class="con ...
- html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案 本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...
- html+css实现左侧固定右侧横向滚动的表格(百度小程序中怎么写表格样式)
最近在用百度小程序写项目,遇到一个问题,设计图中有个左侧固定右侧横向滚动的表格,查看小程序文档组件,并没有完全一致的. 倒是有个差不多的,乍看差不多,实则完全不一样,方向什么的都不同,且未提供 ...
- 如何实现一个左侧固定,右侧自适应的布局?
说到这个问题,我们肯定第一时间想到的是使用flex布局对吧,当然肯定是没错的,但是让我们一起来看看,其他的多种的布局方式吧! 1.左侧固定宽高,右边flex自适应(推荐) 2.左侧浮动,右侧宽度设置1 ...
- 移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项 网址:移动端开发注意事项 二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
- 左侧固定右侧自动填充_办公小技巧:解决Excel公式自动填充问题
在Excel表格中,利用公式可以大大提高计算效率,而通过自动填充的方式将公式应用于更多的单元格,则可以再让效率猛增.但在具体使用公式填充的过程中,也可能会遇到一些问题. 1. 向下填充公式时填充柄找不 ...
最新文章
- java虚拟机改装_java虚拟机线上配置
- Python程序设计题解【蓝桥杯官网题库】 DAY8-基础练习
- Andriod --- JetPack (五):DataBinding + LiveData +ViewModel 简单实例
- [leetcode 70]Climbing Stairs
- 杭州湾跨海大桥视频上云,夯实智慧高速“云基建
- 画面设置_LOL手游设置界面翻译:基本设置/画面/音效/功能与快捷语音
- 详解jenkins几个有用的插件如何使用(emma,findbugs)
- 机器学习与计算机视觉(被忽视的isp图像处理)
- 互联网巨头,困在社区团购里
- 【Docker】Failed to get D-Bus connection: Operation not permitted解决
- 英雄联盟s10信息详解
- 机器学习D9——逻辑回归分类
- 快手切入蓝领招聘,58同城准备好了吗?
- mybatis模仿1之我先看看
- FPGA UART仿真
- php中各种报错处理,PHP中的异常和错误处理
- Zigbee避开Wifi的信道,提升通讯质量
- ubuntu不息屏、隐藏其他软件图标 小技巧
- 使用uniapp开发的第一个微信小程序
- 学习商业思维的重要性
热门文章
- centos-安装python3.6环境并配置虚拟环境
- DB2 SQL性能调优秘笈pdf
- kafka监控工具kafkaOffsetMoniter的使用
- JS factory
- 【Android】自带Theme
- python表情符号编码大全_Emoji的编码以及常见问题处理
- 通过bios修改服务器ipmi配置,Dell服务器之配置ipmi远程console管理
- pause容器作用_Kubernetes学习之pause容器
- AUTOSAR从入门到精通100讲(十八)-AUTOSAR操作系统OS
- python的代码在哪写_python代码在哪里编写