<div id="main"><div class="top">李白</div><div class="left">明月幾時有</div><div class="right">把酒問青天</div> </div>

1 #main{ 2 height: 540px; 3 width: 400px; 4 margin:0 auto; 5 border:1px solid black; 6 overflow: hidden; 7 } 8 .top{ 9 height: 60px; 10 width: 150px; 11 margin:0 auto; 12 margin-bottom: 10px; 13 line-height: 50px; 14 font-size: 35px; 15 text-align: center; 16 letter-spacing: 10px; 17 background:red; 18 } 19 .left,.right{ 20 float:left; 21 height:480px; 22 width:100px; 23 padding-left: 15px; 24 font-size: 65px; 25 word-wrap:break-word; 26 letter-spacing: 50px; 27 background:red; 28 box-sizing:border-box; 29 } 30 .right{ 31 float: right; 32 33 }

！！！豎直排列！！！

可以利用文字的大小，文字間距，行高，padding來保證文字是豎行排列的！

轉(zhuǎn)載于:https://www.cnblogs.com/xmlearning/p/7887276.html

總結(jié)

以上是生活随笔為你收集整理的浮动—春联（文字竖直排列）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。