练习-CSS3 多栏(Multi-column)

CSS3 多栏(Multi-column)

理想效果

或者

实际效果

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>Multi-column</title><link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body><div id="hotels"><div class="box-item"><div class="item-image"><img src="../images/hotel-1.jpg" alt=""></div><div class="item-title">某某</div><div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div></div><div class="box-item"><div class="item-image"><img src="../images/hotel-2.jpg" alt=""></div><div class="item-title">某某</div><div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div></div><div class="box-item"><div class="item-image"><img src="../images/hotel-4.jpg" alt=""></div><div class="item-title">某某</div><div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div></div></div>
</body>
</html>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
html{height:100%;font-size:62.5%;}
body{height:100%;font-size:1.2rem;line-height:1.5;color:#333;background:-moz-linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);background:-webkit-linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);background:linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);background-color:#f9f9f9;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
img{vertical-align:top;width:100%;}
dfn{font-style:normal;font-family:arial;}
i,em{font-style:normal;}
ul,li{list-style:none;}
input:focus{outline:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
header,footer{display:block;}/*推荐hotels*/
#hotels{-moz-column-count:2; /* Firefox */-webkit-column-count:2; /* Safari and Chrome */column-count:2;padding: 10px;min-width: 240px;
}
#hotels .box-item{margin-bottom: 10px;font-size: 1.2rem;background-color: #fff;border-radius:5px;width: 100%;display:inline-block;
}
#hotels .box-item img{border-radius:5px 5px 0px 0px;
}
#hotels .box-item .item-title,
#hotels .box-item .price-right
{padding: 5px 8px;
}
#hotels .box-item .price-right
{text-align:right;font-size: 1rem;/*chrome下最小12px这个不生效*/
}
#hotels .box-item .price-right .mark-bigger
{font-size: 1.6rem;/*价钱字体偏大*/margin-right: 2px;/*与起字有点距离*/
}

练习初衷是想写一个瀑布流布局（不用滚动加载），而又不想用jQuery或者JavaScript。

CSS3的Multi-column布局，更是适合文本，或者等大小的inline-block。

如果大小不同，结果往往不尽人意。

实际显示因为box-item排放的顺序而不同，例如理想状态的第一个图，box-item就要按照大-小-大-小的顺序，理想状态的第二个图，就要按照大-小-大。

非理想的图就是因为排序为大-大-小，结果就不理想。

转载于:https://www.cnblogs.com/ElenaSun-FM/p/4961348.html

练习-CSS3 多栏(Multi-column)相关推荐

html5页面上下分栏,HTML5+CSS3 分栏效果
HTML5+CSS3 分栏效果在很多刊物.报纸.网页中,都会看到将文本内容分成几栏的效果.而columns属性就可以同时定义多栏的数目和每栏宽度等. 通过上述语法中,中文参数的含义,即可理解&quo ...
css3 分栏滑页翻页,基于CSS3 column多栏布局实现水平滑页翻页交互
一.CSS3 column多栏布局私有前缀: -webkit-.-moz- 常用的属性: column-width:每栏的高度 column-count:最理想的分栏个数 column-gap:栏目 ...
CSS3属性之多栏布局column
文将针对CSS 3中的多栏布局做详细介绍,使用多栏布局时只能为所有栏指定一个统一的高度,栏与栏之间的宽度不可能是不一样的,另外也不可能具体指定什么栏中显示什么内容,因此比较适合使用在显示文章内容的时候 ...
瀑布流布局：CSS3多列属性column实现
使用CSS3多列属性所踩得坑多列属性会将容器平分成对应设置列数如图:column-count: 2, 会将容器分成两列.需要注意:每列之间会有个默认间距,大概是16px,间隔如图红线所处的空白空间 ...
JQ css3 导航栏到底部上移
导航栏 .navigation {position: fixed;bottom: 100px;right: 100px;z-index: 100; } .navigation {transition: ...
HTML5+CSS3导航栏设计
HTML5代码  <header> <h1>User Management</h1> ...
CSS3新特性-多栏布局
为了实现类似报纸,杂志的多列排版的布局,CSS3新增了一个多列布局模块(css multi column layout module).主要应用在文本的多列布局方面. 语法: colums:<c ...
幕客学习CSS3全面基础知识点
CSS基础什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至3 ...
神奇的Css3（3）多列布局
六.columns 多列布局为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...

练习-CSS3 多栏(Multi-column)

练习-CSS3 多栏(Multi-column)相关推荐

最新文章

热门文章