css3 columns

column 分割子元素不被截断的示例

by weiming le

HTML

<div>
    <p>有一段时间没有写文章了，之前的几篇瀑布流布局的文章得到一些朋友的关注。应该是受到淘宝UED的这篇（瀑布流布局浅析）博文的启发，发现好多朋友一直在寻找html5(css3)实现瀑布流布局的方法，故有此下文。</p>
    <p>在开始这篇文字之前我先指出，做学问要严谨，比较准确的说，此文讲的并不是html5来实现的瀑布流效果，并且单纯的html也实现不了样式的表现，这里指的是css3的实现。而为什么我还要写成html5(css3)这样的标题呢，当然是引入流量了。你懂得！</p>
    <p>css3中增加了一个新的属性：column，来实现等高的列的布局效果。该属性有column-width宽度，column-count数量等，并且能根据窗口自适应。更多内容自行百度吧，呵呵</p>
    <p>在这里我开门见山的指出，下面的这种布局应该是成为css3的一种布局格式，姑且算作一种类瀑布流吧，但是此瀑布流非彼瀑布流。这种瀑布流的实现方法，用到了css3的column属性，个人之见：该属性比较适合用于一些文字性内容的布局上，而不是我们常见的瀑布流的小格子布局。</p>
    <p>采用css3的column属性可以达成我们要求的显示效果，但是并不能达成我们期望得到的用户体验效果</p>
</div>

CSS

div { border:2px solid orange; -webkit-columns:200px 3;-webkit-column-rule:1px dotted #999; -webkit-column-gap:10px; padding:10px; }
p { display:inline-block; line-heihgt:1.5; border:2px solid orange; margin-bottom:10px; font-size:14px; color:#333;  }