幽灵资源网 Design By www.bzswh.com
HTML实现2列布局,左侧宽度固定,右侧自适应
实现一:
<style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-type(1){ float: left; //利用浮动 // postion: absolute; //利用绝对定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // 【块级元素,默认自动填充父元素宽度,霸占一行】 // 当前:右侧块元素宽度=父元素宽度 div:nth-of-type(2){ // 设置margin-left为左侧块元素的宽度。 margin-left: 300px; // 现在:右侧块元素的宽度=父元素宽度-margin-left height: 220px; background: blue; } </style> <html> <div>div1</div> <div>div2</div> </html>
1)设置margin-left之前
2)设置margin-left之后
实现二:
<style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流 div:nth-of-type(1){ float: left; //利用浮动 // postion: absolute; //利用绝对定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // FC是普通(常规)文档流,格式化上下文,是页面中的一块渲染区域,有一套渲染规格。BFC是块级格式化上下文。 // 利用BFC块级格式化上下文,建立一个隔离的独立容器 div:nth-of-type(2){ // 改变overflow的值不为visible,触发BFC overflow: hidden; height: 220px; background: blue; } </style> <html> <div>div1</div> <div>div2</div> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?