导航菜单
首页 > 网页制作 > HTML/Xhtml » 正文

HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

后台-系统设置-扩展变量-手机广告位-内容正文顶部
这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

收藏此文 赞一个 ( ) 打赏本站

如果本文对你有所帮助请打赏本站

  • 打赏方法如下:
  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
后台-系统设置-扩展变量-手机广告位-内容正文底部

相关推荐:

留言与评论(共有 0 条评论)
   
验证码:
二维码