ホームページ > 記事 > ウェブフロントエンド > css3 の新しいプロパティ: css3 複数列レイアウト プロパティの概要 (例付き)
css3で複数列レイアウトの属性が追加されました 複数列レイアウトとは?いわゆる複数列レイアウトとは、新聞のレイアウトと同様に、複数の列を作成してテキストをレイアウトすることです。そこで、この記事では、複数列レイアウトに関連するいくつかのプロパティとコード例を見ていきます。
CSS3 複数列レイアウト コンテナーのプロパティ:
column-width: auto |
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>为什么您宁愿吃生活的苦,也不愿吃学习的苦?</h1> <h3>一. 为什么大多数人宁愿吃生活的苦,也不愿吃学习的苦?</h3> <p>记得小时候上学,学校每次放月假,爷爷就去车站接我回家。 那时家里离车站远,需要骑着车子来回。 一路上我们彼此相对无语,等到爷爷骑不动了,我们就这么一前一后推着车子走着,记得爷爷常常和我说: “吃得苦中苦,方为人上人,你日后要好生读书。” 那时的我未解其意,只是默默记在心里,望着不远处稻田里的乡亲们弯腰割麦俯首插秧,我觉着他们太辛苦了。 几年过去了,我考入了省城上大学,学了这个城市最热门也最富前景的工程造价专业。 后来,我走进实习单位, 工地的环境有多么糟糕自不必多说,晴天尘土飞扬骄阳似火,雨天泥泞不堪污水四溢。 物质世界的贫瘠尚可以忍受,然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。 后来,我选择去了深圳,在那里我终于找到了自己热爱的行业,眼前陌生的一切都让我感到兴奋和欢愉。 人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。 越是不断地拓宽知识面,越是觉得自己知识储备量的贫瘠与荒凉。</p> <h3>二. 生活的痛苦使人麻痹,学习的痛苦让人清醒 ;过去不按思维而生活,终将有一天要按照生活而思维</h3> <p>痛苦之所以不被人喜欢,大多数是因为人们从不会思考自己为何痛苦。 然而,这世上还有另一种痛苦是,对这个世界产生了失望的情绪,然后把自己对这个世界的失望,当作是自己本该如此,甚至误以为这就是吃苦的好处。 我总觉得苦难的意义,在于我们更好地去思考人生为何如此苦难,就像有人曾说:未经省察的人生,从不值得一过。 如果没有经过思索和自省,苦难终究只是苦难而已,没有任何意义。 有些人,年轻时总觉得学不学习无关紧要,反正自己体力好得很,只要自己身体好就能混口饭吃。 他们终将会明白,那些为了讨生活不得已而吃的苦,就是当年不吃学习苦的代价。 学习的苦,是枯燥的苦,是短期没有回报的苦,这种苦看得见,摸得着,谁都不愿吃。 生活的苦,是绝望的苦,是长期没有出路的苦,这种苦看不见,摸不着,谁都不想吃。 我从不喜欢自讨苦吃,如果我能通过学习和自我提升避免遇见这些痛苦的经历,我有什么理由不去学习? 生活其实并不苦,苦的是那个不知苦也不知如何避免吃苦的人生。 学习其实并不苦,苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p> </div>実行効果: おすすめ関連記事:
css3-columns multi-columnlayout_html/css_WEB-ITnose
以上がcss3 の新しいプロパティ: css3 複数列レイアウト プロパティの概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。