您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页div均匀分布代码实例_html/css

div均匀分布代码实例_html/css

来源:宝玛科技网


多个div在同一行以相同间隔分布:


这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例如下:

div均匀分布代码实例    
  • 返回顶部
  • 图层代码
  • 滚动代码
  • 幻灯片
  •   

    以上代码实现了我们的要求,li元素能够均匀的分布在div中,并且中间的间隔是相同的。
    原理非常的简单,就是让li左浮动,然后设置margin-right属性值,也就是li元素之间的间隔,并且div元素具有overflow:hidden属性,这样超出margin-right部分恰好被隐藏,这样就实现了右端没有空白的效果。

    Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务