vertical_text_001

文字竖排demo1

by wu huan

HTML

<div id="content">
	    <div class="PoetryName">爱莲说</div>
    <div style="width:1.5em; float:right;">&nbsp;</div>
    <div class="PoetryPerson">周 敦 颐 </div>
    <div style="width:1.5em; float:right;">&nbsp;</div>
    <div class="PoetryContent">水陆草木之花　</div>
    <div class="PoetryContent">可爱者甚蕃　</div>
    <div class="PoetryContent">晋陶渊明独爱菊　</div>
    <div class="PoetryContent">自李唐来　</div>
    <div class="PoetryContent">世人甚爱牡丹　</div>
    <div class="PoetryContent">予独爱莲之出淤泥而不染　</div>
    <div class="PoetryContent">濯清涟而不妖　</div>
    <div class="PoetryContent">中通外直　</div>
    <div class="PoetryContent">不蔓不枝　</div>
    <div class="PoetryContent">香远益清　</div>
    <div class="PoetryContent"> 亭亭净植　</div>
    <div class="PoetryContent"> 可远观而不可亵玩焉　</div>
    <div class="PoetryContent">予谓菊花之隐逸者也　</div>
    <div class="PoetryContent">牡丹花之富贵者也　</div>
    <div class="PoetryContent">莲花之君子者也　</div>
    <div class="PoetryContent">噫菊之爱　</div>
    <div class="PoetryContent">陶后鲜有闻　</div>
    <div class="PoetryContent"> 莲之爱　</div>
    <div class="PoetryContent"> 同予者何人　</div>
    <div class="PoetryContent"> 牡丹之爱　</div>
    <div class="PoetryContent"> 宜乎众矣　</div>
		<div style="margin-left:40px;margin-top:-20px;"><img width="380px" height="297px" src="http://upload-images.jianshu.io/upload_images/2054-18b134dfb3645239.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" /></div>
</div>

CSS

*{
		  font-family:Georgia;
      background-color:#ffffff;
		}
		#content{
		   position:absolute;
		   width:1200px;
		   height:400px;
		   left:50%;
		   top:50%;
		   margin-top:-300px;
		   margin-left:-600px;
		   border:1px dashed  #2f96b4;
		   padding-top:50px;
		   border-radius:20px;
		}
		#contentRemark{
		   position:absolute;
		   width:1200px;
		   height:300px;
		   left:50%;
		   top:56%;
		   margin-left:-600px;
		   padding-top:50px;
		   text-indent:2em;
		   font-size:20px;
		   line-height:2em;
		}
		.PoetryName{
			font-size:xx-large;font-weight:bold;line-height:1.5em;width:1.5em; 
			float:right;font-size:36px;padding-top:40px;
			padding-right:20px;
		}
		.PoetryPerson{
			width:1.5em; float:right;line-height:2em;padding-top:70px;
			font-size:18px;
			color:#d3524e;
		}
		.PoetryContent{
			width:1.5em; float:right;line-height:1.5em;padding-top:30px;
			font-size:20px;
		}

		.PoetryContent:hover{
			width:1.5em; float:right;line-height:1.5em;padding-top:30px;
			font-size:20px;
			cursor:pointer;
			color:#d3524e;
		}