html+css实现左侧定宽，右侧自适应的布局-白红宇

html+css实现左侧定宽，右侧自适应的布局

阅读量：5957 次

发布时间：2019-06-19

本文共 2396 字，大约阅读时间需要 7 分钟。

实现一侧定宽，一侧自适应的布局的方法a 、b

a、利用左侧元素浮动，或者绝对定位的方式使其脱离常规文档流

1、利用float和margin来实现

css

<style>

.father{border:1px solid #444;overflow:hidden;}

.father img{width:60px;height:64px;float:left}

.father p{margin-left:70px;padding-right:20px;}

</style>

html

<p>张艺兴，努力，努力，再努力！努力，努力，再努力！不知道干什么，我先干好自己现在手头的工作！</p>

</div>

浏览器(591 x 806)效果图：

2、利用float和css3中的calc

css

<style>

.container{overflow: hidden;height: 500px;margin: 10px 0;color:#fff;border:2px solid red;}

.container>div{height: 100%;float: left;}

.left{width: 200px;background: pink;}

.right{background: #333;width:calc(100% - 200px);}

</style>

html

<div class="right">右侧自适应</div>

</div>

3、利用定位position:absolute和margin来实现

css

<style>

.container{border:2px solid red;position:relative;height:200px;}

.left{width:200px;height:200px;background:pink;position:absolute;}

.right{height:200px;background:#333;margin-left:200px;}

</style>

html

</div>

4、利用定位position来实现

css

<style>

.container{border:2px solid red;height:500px;color:#fff;overflow:hidden;position:relative;}

.container div {height:100%;}

.left{position: absolute;left: 0;top:0;width: 200px;background:pink;}

.right{position: absolute;left: 200px;top:0;right: 0;background:#333;}

</style>

html

<div class="right">right</div>

</div>

b、BFC（块级格式化上下文）BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响

5、float与overflow或者display:flex;

css

<style>

.container{border:2px solid red;height:500px;color:#fff;}

.left{width:200px;height:200px;background:pink;float:left;}

.right{height:200px;background:#333;overflow: auto; /*display:flex;*/ }

</style>

html

<div class="right">right</div>

</div>

6、display:table来实现

<style>　

.container{height: 500px;margin: 10px 0;display: table;width: 100%;color:#fff;}

.container>div{height: 100%;display: table-cell;}

.left{width: 100px;background: pink;}

.right{background: #333;}

</style>

html

<div class="right">右侧自适应</div>

</div>

效果图

转载于:https://www.cnblogs.com/studyh5/p/10142196.html

你可能感兴趣的文章

从蚂蚁金服实践入手，带你深入了解 Service Mesh

查看>>

24周年，“常青树”Delphi发布新版本10.3.1

查看>>

7. 从数据库获取数据- 从零开始学Laravel

切图崽的自我修养－[ES6] 编程风格规范

Android — 创建和修改 Fragment 的方法及相关注意事项

查看>>

流程控制： jQ Deferred 与 ES6 Promise 使用新手向入坑！

查看>>

swift基础之_swift调用OC/OC调用swift

查看>>

Devexpress 15.1.8 Breaking Changes

查看>>

Java B2B2C多用户商城 springcloud架构- common-service 项目构建过程（七）

查看>>

杨老师课堂之ArrayList集合常用方法解析

查看>>