浮动—春联（文字竖直排列）

<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来保证文字是竖行排列的！

转载于:https://www.cnblogs.com/xmlearning/p/7887276.html