1. 程式人生 > 其它 >css3基礎---多列布局

css3基礎---多列布局

column-width指定每一欄的寬度(這是多列布局的第一種分法)

column-count指定要多少欄(這是多列布局的第二種分法)

column-gap欄目間的距離

column-rule欄目間隔線

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin
: 0; padding: 0; } .tttx{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 600px; width: 600px; border
: 1px solid; /* ********** */ /* column-width: 200px; */ column-count: 4; column-gap: 20px; column-rule: 1px solid red; } </style> </head> <body> <div class
="tttx"> <p class="inn"> 可笑的不是人們講的笑話,可笑的是人們感到痛苦的不是 笑聲代替了思考,而是他們根本不知道為什麼笑,以及他們為什麼 不去思考,看吧,承認吧,人們啊總是把自己放大,其實在這宇宙中 ,連一粒塵土都不及啊。 魯迅先生想告訴我們的無非就是這些道理,想要救人,救中國人得 從人心入手,從思想開刀,因為人生而平等但人性無法從根醫治,在如 今社會上,形形色色的人,無論是再優秀的人都會有一己之私,我也從不 相信有十全十美的人,人都是自信的,總是一邊向別人索取一些東西,卻又裝作貧窮。 </p> </div> </body> </html>