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

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









gitリポジトリを削除するには、次の手順に従ってください。削除するリポジトリを確認します。リポジトリのローカル削除:RM -RFコマンドを使用して、フォルダーを削除します。倉庫をリモートで削除する:倉庫の設定に移動し、「倉庫の削除」オプションを見つけて、操作を確認します。

gitを介してローカルにプロジェクトをダウンロードするには、次の手順に従ってください。gitをインストールします。プロジェクトディレクトリに移動します。次のコマンドを使用してリモートリポジトリのクローニング:git clone https://github.com/username/repository-name.git

解決:gitのダウンロード速度が遅い場合、次の手順を実行できます。ネットワーク接続を確認し、接続方法を切り替えてみてください。 GIT構成の最適化:ポストバッファーサイズ(Git Config -Global HTTP.Postbuffer 524288000)を増やし、低速制限(GIT Config -Global HTTP.LowsPeedLimit 1000)を減らします。 Gitプロキシ(Git-ProxyやGit-LFS-Proxyなど)を使用します。別のGitクライアント(SourcetreeやGithubデスクトップなど)を使用してみてください。防火を確認してください

Gitアカウントに公開キーを追加する方法は?ステップ:SSHキーペアを生成します。公開キーをコピーします。 gitlabまたはgithubに公開キーを追加します。 SSH接続をテストします。

eコマースのウェブサイトを開発するとき、私は困難な問題に遭遇しました:大量の製品データで効率的な検索機能を達成する方法は?従来のデータベース検索は非効率的であり、ユーザーエクスペリエンスが低いです。いくつかの調査の後、私は検索エンジンタイプセンスを発見し、公式のPHPクライアントタイプセンス/タイプセンス-PHPを通じてこの問題を解決し、検索パフォーマンスを大幅に改善しました。

GITサーバーをパブリックネットワークに接続するには、5つのステップが含まれます。1。パブリックIPアドレスのセットアップ。 2。ファイアウォールポート(22、9418、80/443)を開きます。 3。SSHアクセスを構成します(キーペアを生成し、ユーザーを作成します)。 4。http/httpsアクセスを構成します(サーバーをインストールし、許可を構成); 5.接続をテストします(SSHクライアントまたはGITコマンドを使用)。

コード競合とは、複数の開発者が同じコードを変更し、GITが変更を自動的に選択せずにマージすると発生する競合を指します。解決手順には、競合するファイルを開き、競合するコードを見つけます。コードを手動でマージし、競合マーカーに保持する変更をコピーします。競合マークを削除します。変更を保存して送信します。

GITを介してSSHを検出するには、次の手順を実行する必要があります。SSHキーペアを生成します。 Gitサーバーに公開キーを追加します。 sshを使用するようにgitを構成します。 SSH接続をテストします。実際の条件に応じて可能な問題を解決します。
