css3 の新しいプロパティ: css3 複数列レイアウト プロパティの概要 (例付き)

css3で複数列レイアウトの属性が追加されました 複数列レイアウトとは？いわゆる複数列レイアウトとは、新聞のレイアウトと同様に、複数の列を作成してテキストをレイアウトすることです。そこで、この記事では、複数列レイアウトに関連するいくつかのプロパティとコード例を見ていきます。

CSS3 複数列レイアウト コンテナーのプロパティ:

column-width: auto | : 列の最小幅 (min-width) を定義します。

auto: 列の幅は他の要素によって決まります。

length: 最小幅を明示的に設定します。

column-count: auto | : 列の数を定義します。

auto: 要素の列は 1 つだけです。まるで設定が無いみたいです。

: 正の整数値。値は 0 より大きい整数であり、負の値は無効です。

columns: > : 列幅と列数の省略形です。任意の注文。

列幅 = (親要素の幅 - (列数 - 1) 列ギャップ) / 列数 *
例: 親要素は 40em で、4 つの列に分割され、列ギャップは 2em です。この場合、列幅は (40 - (4-1) * 2) / 4 = 8.5em となります。
明示的に設定された列幅がこの幅より小さい場合は、この幅で表示されます。
明示的に設定された列幅がこの幅より大きい場合、適切なサイズに従って列幅と列数が再配置されます。現在設定されている列幅と列数は正確ではありません。

column-gap:normal | : 列の間隔を定義します。値が大きすぎるとレイアウトが崩れます。

normal: ブラウザによって解析されるデフォルト値、通常は lem。
: 浮動小数点数とユニット識別子で構成される長さの値。例: 2.1em。

列ルール: 列の境界線を定義します。

その中心線は常に列間隔の中心線と同じです。つまり、常に 2 つの列の中央に位置します。ボーダーに似ています。列の境界線が列間隔よりも大きい場合、列の境界線は自動的には消えません。列間隔を超えた列境界線の部分がテキストの下に沈んで見えます (背景効果)。

column-fill: auto |balance: 複数の列の各列の高さを均一にするかどうかを定義します。

この属性は非常に奇妙です。そしてそれはブラウザ間で均一ではありません。値は 2 つあります: auto | バランス。存在する ie10/ie11/opera40/chrome52 でのテスト結果はすべて同じであり、これら 2 つのプロパティに違いがないことがわかります。 Firefox 49 でテストした場合、これら 2 つのプロパティには違いがあります。バランスとは、設定した列の数に関係なく、各列の高さがほぼ同じ (整列) であることを意味し、自動ではそれらが 1 つの列に自動的にマージされます。

css3 複数列レイアウト項目 (要素) 属性:

column-span: none | all: 要素がまたがる列の数を定義します。

タイトルをすべての列に配置することが多い場合。次に、列スパン: すべて。デフォルト値は columns-span: none で、列の範囲がないことを示します。

css3 複数列レイアウト コード:

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局｜column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>


    <div>
        <h1 id="为什么您宁愿吃生活的苦-也不愿吃学习的苦">为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
      <h3 id="一-为什么大多数人宁愿吃生活的苦-也不愿吃学习的苦">一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
        <p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3 id="二-生活的痛苦使人麻痹-学习的痛苦让人清醒-过去不按思维而生活-终将有一天要按照生活而思维">二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

実行効果:

おすすめ関連記事:

css3-columns multi-columnlayout_html/css_WEB-ITnose

新しいCSS3カラムレイアウトモジュールの特徴

CSS3 Columns 使いやすいカラムレイアウト

以上がcss3 の新しいプロパティ: css3 複数列レイアウト プロパティの概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。