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

当我们使用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

浮动元素的均匀分布和两端对齐相关推荐

php中css样式两端对齐,CSS两端对齐
前面的话两端对齐在导航Nav的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以 ...
两端对齐的css,CSS两端对齐(示例代码)
flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以使用主轴对齐justify-content的两端对齐属性space-betweenjusti ...
display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
用 justify-content 属性设置子元素两端对齐
外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐 <!DOCTYPE html> <html> <head> ...
html两个盒子怎么左右对其,多个div两端对齐
如何使div里的两个div两端对齐设置所在层的padding和margin属性就好了如下 div { padding:10px; } div img { margin-right:10px; mar ...
html图片左右对齐,css如何让图片或者文字两端对齐
css原生的就支持图片或者文字两端对齐.两端对齐,在css布局中是很常见的.两端对齐,是子元素水平的,均匀的分布在父元素内 .css中使用两端对齐,使用的是 text-align-last:justi ...
CSS浮动元素特点有什么
什么是浮动? 元素的浮动是指设置了浮动属性(flot)的元素. CSS浮动有什么作用? 1.让多个盒子水平排列成一行,浮动成为布局的重要手段; 2.可以实现盒子的左右对齐等等; 3.浮动最早是用来控制 ...
[css] 用css怎么实现两端对齐？
[css] 用css怎么实现两端对齐? 文本的两端对齐<style>.form .text {display: inline-block;width: 65px;text-align-la ...

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

浮动元素的均匀分布和两端对齐相关推荐

最新文章

热门文章