关闭

布局之左侧固定,右侧自适应

时间: 2019-08-21阅读: 607标签: 自适应

1,固定侧左浮动,右侧设置margin

给左边的固定宽度区left浮动并设置一个宽度,右边的自适应区right只设置margin值,假设right的宽度是100%,那么设置margin后,它得宽度就变为100%-margin;left发现自己的宽度可以和right挤在同一行,它就浮动上来了

<style>	
	#main{
        overflow:hidden;/*清除浮动*/
    }
    #left{
        float:left;
        width:300px;
        background:red;
    }
     #right{
        margin-left:310px;
        background:#666;
   }
    #footer{
        height:50px;
        background:#ccc;
        margin-top:10px;
    }
</style>
<title>宽度自适应</title>
</head>
<body>
<div id="main">
    <!--这种方法必须把固定宽度区写在前面,否则布局不了-->
    <div id="left" style="height:400px;">content我是固定宽度区</div>
    <div id="right" style="height:300px;">sider我是自适应区</div>

</div>
<div id="footer">footer</div>

记得清除浮动,这样不管left和right谁更长,footer都不会错位,不会对布局造成影响; 
但是,这种方法必须让固定宽度区写在自适应区前面。


2,固定宽度区使用绝对定位,自适应区设置margin

若想把自适应区right写在前面,给right设置margin值,需要给left固定宽度区设置绝对定位,在此之前把父元素main设置为相对定位relative,让left的绝对定位是相对于main而不是相对于整个网页。

<head>
    <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
    <style type="text/css">
        div{
            margin:0;
            padding:0;
        }
        #main{
            position:relative;
        }

        #left{
            position:absolute;
            top:0;
            left:0;
            width:300px;
            background:red;
        }
          #right{
            margin-left:310px;
            background:green;
       }

        #footer{
            height:50px;
            background:#ccc;
            margin-top:10px;
        }
    </style>
    <title>宽度自适应</title>
</head>
<body>
    <div id="main">
        <div id="right" style="height:300px;">right我是自适应区</div>
        <div id="left" style="height:400px;">left我是固定宽度区</div>
    </div>
    <div id="footer">footer</div>
</body>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5419

关闭

HTML+Css让网页自动适应电脑手机屏幕

在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度,其中:width=device-width :表示宽度是设备屏幕的宽度,height=device-height :表示宽度是设备屏幕的宽度

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

rem 是相对长度单位,是指相对于根元素(即html元素)font-size(字号大小)的倍数;vw 是相对长度单位,相对于浏览器窗口的宽度,浏览器窗口宽度被均分为100个单位的vw,rem 和 vw 结合实现WEB页面等比例缩放自适应

CSS实现自适应正方形、等宽高比矩形

利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度;利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult

WKWebView加载的网页自适应大小

有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢?以下代码可以适配大小

将一堆图片自适应页面排列

最近在开发一个批量展示图片的页面,图片的自适应排列是一个无法避免的问题,在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下

CSS实现自适应分隔线的N种方法

伪元素+transform:translateX(-100%);主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移100%就可以了,父级记得超出隐藏。

css弹性盒模型实现元素宽度(高度)自适应

css实现左侧宽度固定右侧宽度自适应:定位、浮动、margin;css3弹性盒模型实现自适应:上下高度固定中间高度自适应、左侧宽度固定右侧宽度自适应

高度自适应

高度不去设置,或者高度设置auto 内容撑开父元素的高度。内容撑开父元素的高度 -> 最小高度的设置 min-height,浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应,高度为宽度一半的容器。

移动端自适应

js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!