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

来源：互联网发布：b超数据标准编辑：程序博客网时间：2024/06/06 19:30

<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>

0 0