等高的區塊欄位

製作等高的DIV區塊﹙Equal Height Columns﹚

製作等高的DIV區塊﹙Equal Height Columns﹚,就是設置多層的區塊,然後把區塊變成類似表格 table 的概念:

display:table -> 仿 table
display:table-row -> 仿 tr
dispaly:table-cell -> 仿 td

效果演示:

 

HTML:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>等高的區塊欄位</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200802-1">
    <div class="container">
        <div class="box">
            <div class="box-row">
                <div class="box-cell box1">
                    年員明各底女再來飯覺為日不書我嗎本友、引演領友草第走阿人國出準比來為該讀幾車可以球已是兩美重都靜道助分會成可有各情市戲:在們住著前分到人白後界汽……林人了樣石重麼成長訴影光房過不,我不充,亮收學力靜著記特。
                </div>
                <div class="box-cell box2">
                    不文界生待水長候創隊主來開訴白業、終期資醫安了在他,財自技了沒何國人停自下學爾內這病去否式有數其食聲命草業大,子像新仍,有大位加以國之星市個麼。毒方眾代首位說表一血……了子格。得濟狀門術背究器可否道好除際間提才靜是年境題色研活權步依……全司命水朋檢一起仍我素因臺而不時,麼當定正型電,數他去李相我。賽情國顯不和片型離手裡到個路活友兩龍好萬就高亮度應一希特早響我,防整後點是們中細是到力統片就以又!只訴冷……調好甚少生沒用去見;灣團費希大名是月,我市了公何,離出形為那人建市失先正結?
                </div>
                <div class="box-cell box1">
                    是不方有收,部有的不車而此計小微可師沒以來情環家隨天該立;麼聽樂親下劇反這期我反和必斷技酒加了臉小印員求。於日的有。
                </div>
            </div>
        </div>
    </div>
</body>

</html>

 

CSS:

#dailycss_20200802-1 {
    background-color: #4a4a4a;
    margin: 0;
    padding: 40px;
}

#dailycss_20200802-1 .container .box {
    width: 100%;
    margin: 40px auto;
    background: #fff;
    display: table;
}

.#dailycss_20200802-1 .container .box .box-row {
    display: table-row;
}

#dailycss_20200802-1 .container .box .box-row .box-cell {
    display: table-cell;
    width: 33%;
    padding: 20px;
}

#dailycss_20200802-1 .container .box .box-row .box-cell.box1 {
    background: #ff00ea;
    color: #fff;
}

#dailycss_20200802-1 .container .box .box-row .box-cell.box2 {
    background: #fbff23;
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

留言支持 Markdown 格式





關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸
最新PO文
Go to Blog
文章分類
Social Accounts