CCS3的column属性和vh

分栏显示。
HTML代码

<div class="box">
  ...
</div>

CSS代码

.box {
                /*column-count: 4;*/
                /*两个同时设置时下面为min-width,即最少为100px*/
                /*column-width: 100px;*/
                
                columns: 4;
                /*column-gap: 栏间距*/
                column-gap: 50px;
                /*column-rule:  栏间线*/
                column-rule: 2px dashed red;                
            }

最终实现分栏显示。

vh

vh,即view-height。给一个元素100vh时,会沾满整个屏幕,而不用给body,html都设置height100%来实现这个效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,821评论 25 709
  • 亲爱的各位天使,本期大师兄要大家带来的秘诀继续来讲“平衡”。 上一节我们讲到客户在购买你的产品,掏出了钱之后呢,...
    mxxyfyz阅读 234评论 0 0
  • 人生本就苦難重重,不主動吃苦,就會被動受苦,剛好在閱讀本章節,又剛好和艳林姐談起了主動面對問題,解決問題的點! 曾...
    粟莎阅读 155评论 0 1
  • 午夜凉雾 痴痴寻觅 覆于红窗 热泪感它 岂料冰心 缓缓凝结 逐渐带刺 化为冰晶 朝阳初升 如它那般 爱它暖她 岂料...
    小白army阅读 126评论 0 2