[CSSチュートリアル]css use negative margin to achieve average layout of example.
2022-02-02 21:57:32
均等に配置する場合は、一般的にネガティブマージン方式を使用します。下の画像は、平均的なレイアウトの場合です。
通常この場合、親要素と子要素の間にdivを1層追加し、このdivに子要素間の距離の値で負のmargin-rightを設定します。
例えば、子要素の幅を100px、子要素を3つ作り、それぞれの子要素のmargin-rightを50pxにすると、親要素の幅は100x3+50x2=400pxになります。
//HTML
<div class="father">
<div class="middle">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>
</div>
//CSS
.son1,.son2,son3{
margin-right:50px;
width:100px;
}
.father{
width:400px;
}
.middle{
margin-right:-50px;
}
ミドルレイヤーのmargin-right:-50pxは、右に50px伸びるのと同じで、son3要素が他の要素と一直線上に並ぶように余裕を持たせています。
この記事では、例の平均的なレイアウトを実現するために負のマージンを使用してCSSについて紹介されていますが、より関連するCSS負のマージン平均レイアウトの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトハウスをサポートして願っています!。
関連
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】ピュアCSSでDIVホバーを実現するサンプルコード(固定位置編)
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
-
[CSSチュートリアル]overflow:autoの使い方解説
-
[CSSチュートリアル】Display, Visibility, Opacity, rgba, z-indexのcss。-1差分
-
[css3]CSS3の画像ボーダーを学ぶための記事
-
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS
-
[CSSチュートリアル]なぜheadタグにcssを入れるのか?
-
[CSSチュートリアル】display:olck/noneでメニューバーを完成させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[css3]CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実装する。
-
[CSSチュートリアル】CSS clear float clear:both サンプルコード
-
[CSSレイアウト例】6種類の適応的な2カラムレイアウトを実現するCSS
-
左上または右上にリマインダーのドットを表示するCSS3サンプルコード[CSSチュートリアル