如何实现css布局、左右定宽中间自适应宽度?

  • 时间:2018-10-31 23:05 作者:小白甜甜圈 来源:小白甜甜圈 阅读:144
  • 扫一扫,手机访问
摘要:一开始做这个效果的时候,我用的是图层的方法来控制的,写起来很麻烦。而且到后面的效果也不是很合适,换分辨率小的电脑,中间的内容就会盖到左边的图片上面。用了中间自适应的话即可以避免这个问题啦。做项目的时候要实现如图这样的一个效果,左右各是一张图片,中间内容自适应宽度下面举个例子和附上代码简单详情这个方法

一开始做这个效果的时候,我用的是图层的方法来控制的,写起来很麻烦。而且到后面的效果也不是很合适,换分辨率小的电脑,中间的内容就会盖到左边的图片上面。用了中间自适应的话即可以避免这个问题啦。

如何实现css布局、左右定宽中间自适应宽度?

做项目的时候要实现如图这样的一个效果,左右各是一张图片,中间内容自适应宽度

下面举个例子和附上代码简单详情这个方法,这个布局实现的原理主要是使用float来实现左右环绕,中间的容器设置overflow:hidden来防止容器塌陷,浮动经常会造成少量塌陷问题,所以需要清理浮动,这样设置可以使中间自适应而后左右对齐。

如何实现css布局、左右定宽中间自适应宽度?

代码如下:

css布局小技巧

  • 全部评论(0)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部