CSS3多列样式column布局内容被截断

9人阅读 评论(0) 收藏 举报

今天做了一个瀑布流的效果,发现使用css3的列布局处理这个问题简直是完美啊!

但是在做的过程中还是出现了一个问题,就是在底部出现内容被截断,然后剩余的部分出现在下一列的头部的位置,就像这种


去百度了一下,发现,原来在CSS3规范里,各列的高度是均衡的。浏览器会自动调整每列会填充多少文本,然后让整个布局的高度保持均衡一致。而我们在做这种瀑布流的类似布局的时候,往往只需要设置每个容器的宽度,然后高度通过内容填充来自适应。所以,浏览器在处理的时候,为了保持高度的均衡分配,会将我们的布局截断,然后造成布局错乱。

解决方式:

只需要给分列的容器加上height:100%;overflow: auto;


看!上述的问题就可以完美解决了,是不是很简单啊~~


查看评论

CSS3样式设计

在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
  • 2018年03月14日 14:15

css3中的多列布局columns详解

columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检...
  • gb4215287
  • gb4215287
  • 2017-06-16 10:11:30
  • 486

CSS3多列布局columns相关属性

CSS3中增加了可以实现多列布局的属性 在此之前的实现很麻烦可能需要各种定位 现在我们只需要一个属性就可以实现 多列布局类似于我们的报纸布局 这样可以方便读者观看多列数量与多列宽度如果一行文字...
  • q1056843325
  • q1056843325
  • 2016-11-20 23:10:38
  • 1303

CSS3布局相关样式学习

CSS3相关布局样式学习--盒布局、弹性布局
  • liujie19901217
  • liujie19901217
  • 2016-03-18 23:33:23
  • 1138

CSS3 多列布局

多列布局在CSS3之前,要让Web页面像报纸、杂志的排版一样,呈现多列布局,你必须将内容拆分到不同的标签中,然后分别设定样式,或者使用浮动和绝对定位,或者使用JS脚本等,并且实现起来也很困难。CSS3...
  • ixygj197875
  • ixygj197875
  • 2018-02-24 22:03:30
  • 46

多列布局(column)

**column-fill**: auto | balance。定义多列中每一列的高度是否统一。   这个属性很奇怪。并且在浏览器中不统一。它有两个值:auto | balance。在 ie10/ie...
  • Real_Bird
  • Real_Bird
  • 2016-10-05 12:16:02
  • 1387

浅谈CSS3新特性——multi-column layout跨列

CSS3新增了一个多列布局模块(Multi-column Layout Module),主要应用在文本的多列布局方面。 Multi-column可分为: ① 列数和列宽:column-count、...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-02 13:59:06
  • 627

[CSS3] 多列布局 column

类似报纸杂志一样的布局设计[1] columnscolumns: column-width column-count .wrapper{ width:800px; margin:0 a...
  • linjiayuqazwsx
  • linjiayuqazwsx
  • 2015-12-09 10:36:41
  • 253

css3 弹性布局和多列布局

css3 弹性布局和多列布局弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性。弹性盒子基础定义一个弹性盒子在父盒子上定义display属性:#bo...
  • Faremax
  • Faremax
  • 2017-02-10 10:44:38
  • 1536

《CSS3实战》笔记--多列布局

书籍《CSS3实战》总结 多列布局
  • Lovejulyer
  • Lovejulyer
  • 2016-04-29 00:07:13
  • 8332
    个人资料
    等级:
    访问量: 481
    积分: 101
    排名: 126万+
    文章分类
    文章存档