实现HTML页面元素从上往下，从左往右排序

最新推荐文章于 2023-12-11 15:02:54 发布

javaRoger

最新推荐文章于 2023-12-11 15:02:54 发布

阅读量1.4w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/rogerjava/article/details/38399311

版权

前端专栏收录该内容

134 篇文章 0 订阅

订阅专栏

<html> 
<head> 
<meta charset="utf-8"/> 
<title>从上往下，从左往右</title> 
<style> 
html,body{ margin:0; border:0; padding:0; width:100%; height:100%; } 
.parent{ display:block; background:gray; width:100%; height:100%; } 
.parent{ 
	-webkit-column-width:68px; 
	-moz-column-width:68px; 
	-webkit-column-gap:0px; 
	-moz-column-gap:0px; 
} 
.parent{ 
		writing-mode: tb-lr;/*ie8 竖直排列*/
		*white-space:nowrap; 
}  
.child{ 
	display:inline-block; 
	*display:inline; 
	margin:10px 10px 10px 10px; 
	border:5px solid black; 
	padding:5px; 
	width:50px; 
	height:50px; 
	text-align:center; 
	background:lightblue; 
	writing-mode: lr-tb; /*ie8 竖直排列*/ 
} 
</style> 
</head> 
<body> 
<div class="parent"> 
<div class="child">1</div> 
<div class="child">2</div> 
<div class="child">3</div> 
<div class="child">4</div> 
<div class="child">5</div> 
<div class="child">6</div> 
<div class="child">7</div> 
<div class="child">8</div> 
<div class="child">9</div> 
<div class="child">10</div> 
<div class="child">11</div> 
<div class="child">12</div> 
<div class="child">13</div> 
<div class="child">14</div> 
<div class="child">15</div> 
<div class="child">16</div> 
<div class="child">17</div> 
<div class="child">18</div> 
<div class="child">19</div> 
<div class="child">20</div> 
<div class="child">21</div> 
<div class="child">22</div> 
<div class="child">23</div> 
</div> 
</body> 
</html>