浮动元素的均匀分布和两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果,如图1所示。


图1 两端对齐的版式

单纯使用float:left或者float:right,而不添加额外的class区分元素的位置,似乎是无法实现靠左/右的效果。

首先列出结构:

<div class="justify"><ul><li>靠左边</li><li>中间</li><li>靠右边</li><li>靠左边</li><li>中间</li><li>靠右边</li><li>靠左边</li><li>中间</li><li>靠右边</li></ul>
</div>

思路是:li不需要单独的class来设定左右,而是通过扩大ul的宽度和高度,使其溢出父层,再通过父层的overflow:hidden来隐藏多出容器的部分。

CSS

.justify {
width:320px; /* 1行3个li,li之间距离10px = 100px*3 + 10px*2 */
overflow:hidden;
margin:10px;
border:1px solid #999999;
}
.justify ul {
width:330px; /* 可容纳下3列的宽度 */
margin-bottom:-10px;/* 隐藏掉最下面一行的margin-bottom */
overflow:hidden;
zoom:1;/* 触发IE的Layout */
}
*+html .justify ul {margin-bottom:0;}/* 针对IE7中最后1行li的margin-bottom失效 */
.justify li {
display:inline;float:left;list-style:none;
width:100px;height:100px;margin:5px;
background:#EEEEEE;}

其实,用图2来解释更直观一些:


图2 实现原理

提示:IE7内最后一行li的margin-bottom应该会被IE吃掉,所以ul就不需要margin-bottom了。

此处需注意的是调整div的宽度的同时也要调整ul的宽度。

或者不设定ul的宽度而是用负marign值来达到扩大ul宽度的效果。

非浮动和定位的块级元素,其width值为auto(默认值)时,会尽量充满父元素的内容框,也就是说当没有border/padding/margin时,width是100%。
计算公式:
margin-left+border-left+padding-left+width+padding-right+border-right+margin-rigth=包含块的宽度(div的width)
因此如果设定ul的margin-right为-10px,其他padding/margin/border都为0,则:
ul的width=320px(div的width)-(-10px)=330px
代码如下:

.justify {......}
.justify ul {
margin:0 -10px -10px 0;
overflow:hidden;
zoom:1;/* 触发IE的Layout */
}
.justify li {......}

这样的优点在于,只要调整最外层div的宽度,就可以实现2列或者4列的效果。

转载于:https://www.cnblogs.com/lbnnbs/p/4781901.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20 图|Nacos 手摸手教程

Nacos 作为服务注册中心、配置中心&#xff0c;已经非常成熟了&#xff0c;业界的标杆&#xff0c;在讲解 Nacos 的架构原理之前&#xff0c;我先给大家来一篇开胃菜&#xff1a;讲解 Nacos 如何使用。涉及到如下两个话题&#xff1a;用 Nacos 作为注册中心。用 Nacos 作为配置…

c语言宏函数怎么传递宏参数_C语言中的宏参数评估

c语言宏函数怎么传递宏参数We can define a function like Macro, in which we can pass the arguments. When a Macro is called, the Macro body expands or we can say Macro Call replaces with Macro Body. 我们可以定义一个函数&#xff0c;例如Macro&#xff0c;可以在其…

WebBrowser中html元素如何触发winform事件

这个问题来自论坛提问&#xff0c;对dom稍微了解的话还是比较简单的&#xff0c;只要注册一下事件就可以了。 C#代码如下: using System;using System.ComponentModel;using System.Windows.Forms;namespace WindowsApplication5...{  public partial class Form1 : Form  …

为什么Spring需要三级缓存解决循环依赖,而不是二级缓存?

来源&#xff1a;https://www.cnblogs.com/semi-sub/p/13548479.html在使用spring框架的日常开发中&#xff0c;bean之间的循环依赖太频繁了&#xff0c;spring已经帮我们去解决循环依赖问题&#xff0c;对我们开发者来说是无感知的&#xff0c;下面具体分析一下spring是如何解…

第四代编程语言_几代编程语言

第四代编程语言几代编程语言 (Generations of programming language) Programming languages have been developed over the year in a phased manner. Each phase of developed has made the programming language more user-friendly, easier to use and more powerful. Each…

20款华丽的几何形状字体【免费下载】

这里手机的字体使用几何形状设计。流畅简洁的线条&#xff0c;完美的圆形的角度建立一个完整性的设计感。使用几何形状生成出每一个优雅而现代的字母。这些字体可以用于标题和正文。由于他们的设计适合任何干净简约设计&#xff0c;因此很受欢迎。向下滚动并下载这些免费几何字…

MySQL 精选 60 道面试题(含答案)

金三银四到了&#xff0c;给大家整理一些数据库必知必会的面试题。基础相关1、关系型和非关系型数据库的区别&#xff1f;关系型数据库的优点容易理解&#xff0c;因为它采用了关系模型来组织数据。可以保持数据的一致性。数据更新的开销比较小。支持复杂查询&#xff08;带 wh…

Python中的简单图案打印程序

Pattern 1: 模式1&#xff1a; ** ** * ** * * ** * * * *Code: 码&#xff1a; for row in range (0,5):for column in range (0, row1):print ("*", end"")# ending rowprint(\r)Pattern 2: 模式2&#xff1a; Now if we want to print nu…

Spring Boot 如何解决多个定时任务阻塞问题?

大家好&#xff0c;我是不才磊哥~最近长文撸多了&#xff0c;有点累&#xff0c;今天来点简单的。今天这篇文章介绍一下Spring Boot 中 如何开启多线程定时任务&#xff1f;为什么Spring Boot 定时任务是单线程的&#xff1f;想要解释为什么&#xff0c;一定要从源码入手&#…

mysql之explain

⊙ 使用EXPLAIN语法检查查询执行计划 ◎ 查看索引的使用情况 ◎ 查看行扫描情况⊙ 避免使用SELECT * ◎ 这会导致表的全扫描 ◎ 网络带宽会被浪费话说工欲善其事&#xff0c;必先利其器。今天就简单介绍下EXPLAIN。 内容导航 idselect_typetabletypepossible_keyskeyke…

SpringCloud OpenFeign + Nacos正确打开方式!

作者 | 磊哥来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;Nacos 支持两种 HTTP 服务请求&#xff0c;一个是 REST Template&#xff0c;另一个是 Feign Client。之前的文章咱们介绍过…

array.unshift_Ruby中带有示例的Array.unshift()方法

array.unshiftArray.unshift()方法 (Array.unshift() Method) In this article, we will study about Array.unshift() Method. You all must be thinking the method must be doing something which is related to unshifting of objects in the Array instance. It is not as…

为什么创建线程池一定要用ThreadPoolExecutor?

作者 | 磊哥来源 | Java面试真题解析&#xff08;ID&#xff1a;aimianshi666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;在 Java 语言中&#xff0c;并发编程都是依靠线程池完成的&#xff0c;而线程池的创建方式又有很多&#xff0c;但从…

ruby array_Ruby中带有示例的Array.fill()方法(3)

ruby arrayArray.fill()方法 (Array.fill() Method) In this article, we will study about Array.fill() method. You all must be thinking the method must be doing something related to populate the Array instance. Well, we will figure this out in the rest of our …

Objects.equals有坑

前言最近review别人代码的时候&#xff0c;发现有个同事&#xff0c;在某个业务场景下&#xff0c;使用Objects.equals方法判断两个值相等时&#xff0c;返回了跟预期不一致的结果&#xff0c;引起了我的兴趣。原本以为判断结果会返回true的&#xff0c;但实际上返回了false。记…

strtoupper 小写_PHP strtoupper()函数与示例

strtoupper 小写PHP strtoupper()函数 (PHP strtoupper() function) strtoupper() function is a string function it accepts the string and returns an uppercase string. strtoupper()函数是一个字符串函数&#xff0c;它接受字符串并返回大写字符串。 Syntax: 句法&#…

Java 18 正式发布,默认 UTF-8,finalize 被弃用,别再乱用了!

JDK 18 正式发布JDK 17 刚发布半年&#xff0c;JDK 18 又如期而至&#xff0c;JDK 版本号这算是成年了&#xff1f;JDK 18 发布了&#xff0c;栈长继续为大家解读&#xff01;JDK 18 延续了 JDK 17 开创的免费策略&#xff0c;但&#xff0c;JDK 18&#xff5e;20 不是长期支持…

Spring官方推荐的@Transactional还能导致生产事故?

在Spring中进行事务管理非常简单&#xff0c;只需要在方法上加上注解Transactional&#xff0c;Spring就可以自动帮我们进行事务的开启、提交、回滚操作。甚至很多人心里已经将Spring事务与Transactional划上了等号&#xff0c;只要有数据库相关操作就直接给方法加上Transactio…

python函数实例化_用Python实例化函数

python函数实例化In terms of Mathematics and Computer science, currying is the approach/technique by which we can break multiple-argument function to single argument function. 从数学和计算机科学的角度来看&#xff0c; 柯里化是一种方法/技术&#xff0c;通过它我…

京东二面:MySQL 主从延迟、读写分离 7 种解决方案!

我们都知道互联网数据有个特性&#xff0c;大部分场景都是 读多写少&#xff0c;比如&#xff1a;微博、微信、淘宝电商&#xff0c;按照 二八原则&#xff0c;读流量占比甚至能达到 90%结合这个特性&#xff0c;我们对底层的数据库架构也会做相应调整。采用 读写分离处理过程&…