欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> 网页布局 >> 左侧固定,右侧自适应布局
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • 左侧固定,右侧自适应布局

    来源:网络 浏览:973

    内容提要:本教程介绍了左侧固定,右侧自适应布局实现的两种方法。

    中国网页设计在《巧用CSS负边距把UL/OL变成多列布局》中介绍了负边距的使用技巧,今天教给大家使用css负边距实现左侧固定,右侧自适应布局。

    左侧固定,右侧自适应布局效果图:

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

    左侧固定200px宽,右侧自适应,中间间隔10px。

    HTML:

    <div class="parent">
        <div class="side"></div>
        <div class="mid"></div>
    </div>

    左侧固定,右侧自适应布局实现方法一:

    左侧浮动,父盒子overflow:hidden(把塌陷撑开),右侧写margin-left:210px(因为浮动元素已经脱离文档流了)。

    .parent{
        overflow:hidden;
    }
    .side{
        width:200px;
        height:200px;
        background-color:red;
        float:left;
    }
    .mid{
        width:100%;
        height:200px;
        background-color:blue;
        margin-left:210px;
    }

    左侧固定,右侧自适应布局实现方法二:


    两个子div全都浮动,但是设置左边的浮动元素margin-right:-100%,margin-right:-100%。主要解决浮动元素防错行的问题。 只要将后面元素margin-left:210px就完美没解决了。

    .parent{
        overflow:hidden;
    }
    .side,.mid{
        float:left;
    }
    .side{
        width:200px;
        height:200px;
        background-color:red;
        margin-right:-100%;
    }
    .mid{
        width:100%;
        height:200px;
        background-color:blue;
        margin-left:210px;
    }

    发表评论 共有1人对本文发表评论 查看所有评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    sdfsdf<2016-12-09 16:40:59>评论说:
    www.xin126.cn
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计