文档章节

消除浮动对叔叔类的影响,父类设置了position

RegExInt
 RegExInt
发布于 2016/04/08 23:13
字数 252
阅读 24
收藏 0
<div id="index_roll">
    <div class="show"><img class="roll_img" src="img/1.png"></div>
    <div class="hide"><img class="roll_img" src="img/2.jpg"></div>
    <div class="hide"><img class="roll_img" src="img/3.jpg"></div>
    <div class="hide"><img class="roll_img" src="img/4.jpg"></div>
    <div class="hide"><img class="roll_img" src="img/5.jpg"></div>
</div>
<div id="empty"></div>
<div id="index_nav">
    <p>
    <span><a href="#">首页</a></span>
    <span><a href="#">书库</a></span>
    <span><a href="#">排行榜</a></span>
    <span><a href="#">VIP精品</a></span>
    <span><a href="#">作者专区</a></span>
    <span><a href="#">福利</a></span>
    </p>
</div>
当给index_roll设置浮动后,index_nav这个div将会往上随着移动(因为index_roll还设置了position,如果没有设置,侧因为
包含图片的div撑开了 下面的就不会往上移动)
看了好多办法都没有好的解决方案
后来 采用添加一个空的div empty  尺寸设置成和index_roll一样 完美解决


© 著作权归作者所有

RegExInt
粉丝 1
博文 13
码字总数 3946
作品 0
长沙
后端工程师
私信 提问
【前端Talkking】 CSS系列——CSS深入理解之float浮动

float属性是CSS中常用的一个属性,在实际工作中使用的非常多,如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了,但是对于优秀的前端开发人员,需要有"刨根问底"...

micstone
2018/05/15
0
0
可能是最全面最易懂的解析前端浮动的文章

写在最前 习惯性去谷歌翻译看了看float的解释: 其中有一句这样写的: she relaxed, floating gently in the water 瞬间浮想联翩,一个女神,轻轻地漂浮在水中。开心的拍打着水花,哇靠。。。...

flyfee
2018/10/11
0
0
子元素浮动导致父元素脱离文档流

子元素用了浮动(float:left),父元素会脱离文档流。 解决方案:父元素清除浮动。 给父容器增加属性: 1.display:table 2.overflow:任何一个值都可以,目的是为了让父元素紧邻子元素,消除...

向布谷鸟说早安
2018/10/13
0
0
关于CSS中的float和position和z-index

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页...

evil_01
2016/11/30
73
0
BAT前端面试-css问题集锦

display: none; 与 visibility: hidden; 的区别 相同: 它们都能让元素不可见 区别: display:none;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden;不会让元素从...

大灰狼的小绵羊哥哥
2018/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部