团队氛围建设 网站,网站更名策划方案,中国网站服务器哪个好,中国建设教育协会是个什么网站当我们使用float来使元素并排显示的时候#xff0c;可以使用margin来控制元素之间的距离#xff0c;而在很多版式里#xff08;例如产品图片的列表#xff09;#xff0c;需要浮动的元素达到两端对齐的效果#xff0c;如图1所示。 图1 两端对齐的版式 单纯使用float:left…当我们使用float来使元素并排显示的时候可以使用margin来控制元素之间的距离而在很多版式里例如产品图片的列表需要浮动的元素达到两端对齐的效果如图1所示。 图1 两端对齐的版式 单纯使用float:left或者float:right而不添加额外的class区分元素的位置似乎是无法实现靠左/右的效果。 首先列出结构 div classjustifyulli靠左边/lili中间/lili靠右边/lili靠左边/lili中间/lili靠右边/lili靠左边/lili中间/lili靠右边/li/ul
/div 思路是li不需要单独的class来设定左右而是通过扩大ul的宽度和高度使其溢出父层再通过父层的overflow:hidden来隐藏多出容器的部分。 CSS .justify {
width:320px; /* 1行3个lili之间距离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-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-rigth包含块的宽度div的width因此如果设定ul的margin-right为-10px其他padding/margin/border都为0则ul的width320pxdiv的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
