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>