HTML实现古书排版效果

先上效果图

 实现代码

<style>
    .book {
        background-color: rgb(133, 140, 4);
        min-width: 230px;
        height: 289px;
        font-size: 17px;
        line-height: 28px;
        border-radius: 0.5rem;
        font-family: "微软雅黑";
        margin: .5rem;
        float: left;
    }
    
    .book>p {
        word-wrap: break-word;
        writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        *writing-mode: tb-rl;
        padding: 19px 0;
        float: right;
        margin-right: 20px;
        height: 250px;
        line-height: 25px;
    }
</style>
<div class="book">
    <p>
        二十四节气歌<br> 
        春雨惊春清谷天 夏满芒夏暑相连 
        秋处露秋寒霜降 冬雪雪冬小大寒 
        每月两节不变更 最多相差一两天 
        上半年逢六廿一 下半年逢八廿三
    </p>
</div>
<div class="book">
    <p>
        保护传承<br>
        2006年5月20日，“二十四节气”作为民俗项目经国务院批准列入第一批国家级非物质文化遗产名录。
        2016年11月30日，中国“二十四节气”被正式列入联合国教科文组织人类非物质文化遗产代表作名录。
    </p>
</div>