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

  发布时间:2018-12-10 15:42:28   作者:李佳臣   我要评论

这篇文章主要介绍了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>

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

相关文章

  • Html读取本地文件夹下图片并显示的示例代码

    这篇文章主要介绍了Html读取本地文件夹下图片并显示的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-13
  • HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

    这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-10
  • 使用HTML截图并保存为本地图片的实现代码

    本文通过实例代码给大家分享了使用HTML截图并保存为本地图片的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-14
  • html中表单提交的实现

    表单提交是常见的一种操作,这篇文章主要介绍了html中表单提交的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-06
  • 详解html头标签的使用

    这篇文章主要介绍了详解html头标签的使用 ,需要的朋友可以参考下
    2018-10-31
  • HTML 使用表单标签实现注册页面的实例代码

    这篇文章主要介绍了HTML 使用表单标签实现注册页面的实例代码,需要的朋友可以参考下
    2018-10-31
  • HTML高亮关键字的完美解决方案

    最近项目做晕头,一个接一个,其中遇到这样的一个功能,在网页中高亮关键字的实现方法,下面小编把实现代码及解决方案分享给大家,感兴趣的的朋友跟随小编一起看看吧
    2018-10-22
  • 详解 html area标签

    area 元素总是嵌套在 <map> 标签中。本文重点给大家介绍html area标签的相关知识,需要的朋友参考下吧
    2018-10-15
  • 详解左右宽度固定中间自适应html布局解决方案

    这篇文章主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-08
  • 详解html中 position属性用法(四种)

    这篇文章主要介绍了html中 position用法,文中逐一给大家介绍了position的四个属性值,感兴趣的朋友跟随小编一起看看吧
    2018-09-18

最新评论