【HTML】元素垂直排列

writing-mode 样式可以控制文本在水平或垂直方向上如何排布,试了下,这里所说的文本应该不局限于文字,div 也可以:

<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{ 
        writing-mode: vertical-lr;
}  
.child{ 
    margin:10px 10px 10px 10px; 
    border:5px solid black; 
    padding:5px; 
    width:50px; 
    height:50px; 
    text-align:center; 
    background:lightblue; 
    writing-mode: horizontal-tb;
    display:inline-block;
} 
</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> 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,933评论 1 45
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,667评论 0 6
  • 2018-3-13星期二 刚刚哄睡小宝,客厅传来宝爸和大宝交流学习的声音,具体学习的什么没听清。 宝爸在家为我减轻...
    欢乐的小雨滴阅读 212评论 0 1
  • 我不知道我们还要走多远才能真正学会尊重规则,尊重他人。素质成长,也许需要一生的修行。 当他站在检查室的走廊上,拉开...
    天堂里没有痛阅读 1,119评论 18 44