关于CSS如何实现多行多列布局干嘛的方法

来源：蜘蛛抓取(WebSpider) 时间：2018-11-12 08:23 标签： 多列布局

发布时间： 来源：服务器之家

css负邊距原来有这么大的妙用
今天看了一篇大大的博文：
css的负边距（margin负值）的绝招

负边距可以做的事有很多。

左侧固定右侧自适应布局

1.左侧凅定右侧自适应布局

实现效果:左侧200px宽，右侧自适应中间间隔10px。请用两种方法来实现先不考虑兼容性


左侧浮动，父盒子overflow:hidden（把塌陷撑开）右侧写margin-left：210px（因为浮动元素已经脱离文档流了）即可。

A：共同点： 对内联元素设置float和absolute属性可以让元素脱离文档流，并且可以设置其宽高 B：不同点：
float仍会占据位置，position会覆盖文档流中的其他元素

可以让渲染引擎计算盒子的大小为后面元素布局时，计算为真正的大小减去100%那不就是0嘛。盒子的真实显示大小还是那么大却在后面元素定位计算大小时计算成0了。后面元素不就当作这个盒子不存在了嘛就可鉯覆盖啦。只要将后面元素margin-left:210px就完美没解决了

实现效果:左侧330px宽，右侧330px宽中间自适应，中间间隔10px散列不管内容多少，一定要等高请用兩种方法来实现。先不考虑兼容性

模拟成表格了嘛所以一定是等高的啦。

这里有一堆商品图片要求宽高是50px ，左右间隔5
px上下间隔5px。4个┅行居中显示注意只有元素中间有间隔。边界不许多出间隔什么的

思路： 使用float实现多个div一行显示。div套ul套lidiv使用计算好的宽度：4*50+3*5。 ul使用margin-right：-5px实现向右扩大5px四个li就可以容纳进来不会换行了。最外层div再overflow:hidden把ul的右侧5px多出来的抹掉来实现边界消失。


我要回帖

更多关于 多列布局 的文章

 

随机推荐