使用float属性构建侧滑框

使用float属性构建侧滑框原理:

/**统一盒模型*/
*{
    box-sizing:border-box;
}
/**本行中自动(随侧边滑动框滑动)改变宽度的内容*/
.content{
    display:block;
    overflow:hidden;
}

/** 通过改变滑动框的宽度来实现滑动的效果 可以使用animate添加一次性的动画*/

.slide{
    float:right;
    width:0;   
    position:relative;
}

.slideContent{
    position:absolute;
    left:0;
    top:0;
    width:**px; // 这里的宽度就是在设计动画的时候设置的slide的最大宽度,如果还有边距之类的需要额外加到slide的宽度上
}
<div>
    <div class="content"></div>
    <div class="slide">// 侧边栏
        <div class="slideContent">  //侧边栏所包含的内容 固定宽度
        </div>
    </div>
</div>

这里重点就是需要在.content中添加overflow属性,如果没有的添加的话然后在content中添加设置100%宽度的元素会换行,也即是在float元素该行不能在存放一个行内元素,必须要设置overflow:hidden这样才能和.slide并列排布;

(说实话,我还没搞明白为什么还必须要设置这个overflow:hidden否则就不能并排排布;按照我的理解设置了float:right之后该浮动元素就脱离普通文本流了吗?然后左侧的content不就自动适应了,然后在里面添加块级元素不就相对于该.content元素的100%宽度吗?为什么还必须要添加overflow昵?希望有理解具体原理的老师能解释一下我的疑惑)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页