zoukankan      html  css  js  c++  java
  • 两个常见的前端问题:如何让分页码居中显示 及 解决浮动元素覆盖的问题

    不知道怎么就做起前端的工作了,而且越来越深入。不知道以后会不会走上这条不归路。至少现在要把学到的知识,积累的经验记录下来。

          今天要说两个小问题。一是,分页码居中显示。二是,浮动区块不下沉。

          一、如何让分页码不设宽度的情况下左右居中

          第一个问题,是分页码的问题。如果不设置样式。肯定是靠近左边的。比如这样。

          有同学很聪明,提出了方案。给它设个width,然后,margin:o auto;就OK了。在一定程序上,这个方案是靠谱的,因为页面会以设定的宽度来“居中”显示。但是问题是你怎么知道它的宽度,可能一共有3页,也可能有10页甚至更多。当然,有个方案是退而求其次,显示固定的上一页,下一页和固定3个分页标签就可以固定宽度了。这个方案是可行的,会达到效果。但是今天专门写这篇文章就肯定用个更好的方法了。能让它不论多少页的情况下都能绝对居中显示。

          说出来方法特别简单,就是在分页码的a或li标签外包一个div标签,设置属性display为table.并且设置 margin:0  auto;然后把里面的a,li标签全部设置属性为display:inline-block;就噢了。就是这么神奇。

         

          二、设置浮动后,元素覆盖怎么办。

         

          如上图这样的瀑布流式页面。每条信息里面都会有左右不同的区块,这时候就会用左右浮动,效果特别棒。可是这时候会出现一个副作用,就是设置的块高度不起作用了。下一条信息会覆盖到上一条。原因很简单,因为设置浮动以后,这条信息里的元素都“浮”在了上面。下面的元素就切进去了。

          解决方案同样特别简单,一种方法是在浮动元素后面追加一个div块,设置属性clear:both.清除浮动即可。还有一种更简单的方法,就是给浮动元素的父类元素加个属性overflow:hidden;具体哪种更适合看情况而定吧。

  • 相关阅读:
    iOS
    WKWebview 获取网页加载内容的高度
    iPhoneXS、XS Max与iPhoneXR 适配
    iOS:iPhone X,iPhone XS,iPhone XR,iPHone XS Max 适配
    git---全局设置用户名、密码、邮箱
    iOS 拖动手势(UIPanGestureRecognizer)
    ios 扩大button的点击区域
    iOS总结 | 修改button响应区域的各种姿势
    swift常用第三方库
    《从零开始学Swift》学习笔记(Day 33)——属性观察者
  • 原文地址:https://www.cnblogs.com/zuoshoupai/p/8012484.html
Copyright © 2011-2022 走看看