html页面布局问题

YueZheng 发布于 2015/02/28 10:32
阅读 340
收藏 0

在一个宽度固定的区域内,如何实现平铺若干个方块,方块的数量不确定,块的长宽比例由块的个数决定.

就像图片中显示的一样,方块个数少,每个方块就大一些;个数多,每个块就小,在区域内是‘平铺’的。

不使用JS,单纯的css如何实现?

加载中
1
开源中国最帅没有之一
开源中国最帅没有之一

flex布局

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-flex</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{display:-webkit-box;display:-moz-box;display:-ms-box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}
#box li{-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:pink;}
</style>
</head>
<body>
<h1>box-flex示例:</h1>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>e</li>
	<li>f</li>
	<li>c</li>
</ul>
</body>
</html>



YueZheng
YueZheng
这个果然很吊,就是我想要的效果,学习下。感谢!
0
甘薯
甘薯

高大上啊, 不用js实现...

css好像也支持变量,不过这个变量能和系统打交道吗...

坐等大神回答

xialeistudio
xialeistudio
ie的css可以支持表达式 W3C下的CSS不支持,但是一些less,scss可以支持变量
返回顶部
顶部