网赚妈妈

 找回密码
 立即注册
搜索
查看: 525|回复: 0

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

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-31 15:12:18 | 显示全部楼层 |阅读模式

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

    wUQnwqQwJQqn1UWg.jpg

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

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

    r4016K67V39I8636.jpg

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <title>css布局小技巧</title>

    </head>

    <style type="text/css">

    .nav{

    height: 100px;

    background: #fff;

    font-size: 16px;

    color: red;

    line-height: 50px;

    text-align: center;

    }

    .left{

    float: left;

    background: pink;

    width: 200px;

    height: 100px;

    margin-right: 10px;

    }

    .right{

    float: right;

    background: pink;

    width: 200px;

    height: 100px;

    margin-left: 10px;

    }

    .center{

    height: 100px;

    background: yellow;

    overflow: hidden;

    }

    </style>

    <body>

    <div class="nav">

    <div class="left">

    <p>左边内容定宽、左浮</p>

    </div>

    <div class="right">

    <p>右边内容定宽、右浮</p>

    </div>

    <div class="center">

    <p>中间自适应内容、在HTML中写在最后,渲染顺序从上到下。注意:如果写在前面,还没检测到左右块的宽度,那么center的宽度就自动填充满父级的宽度</p>

    </div>

    </div>

    </body>

    </html>

    回复

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-18 04:45 , Processed in 0.163948 second(s), 16 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表