CSS で並べて表示される複数の div ボックスのコード共有の例-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS で並べて表示される複数の div ボックスのコード共有の例

黄舟

Jul 22, 2017 am 10:32 AM

css 見せる

1. div で 1 行 2 列の 2 列の DIV レイアウトを実装する方法、div で 2 列、1 行と 2 列を並べた DIV レイアウトチュートリアルの解決策
2 つの DIV ボックスを並べて実現するには、 1 行に 2 列の DIV レイアウトのみを表示し、浮動小数点にするには width + float を使用します。 1 行に 2 列を表示する DIV レイアウトを実装します。
最初のケースでは、float は同じです
2 つの div ボックスの float 値を同じにし、たとえば float:left または float:right を設定し、幅を適切に設定します。ここでは、1 行 2 列の DIV レイアウトを実装する場合を使用します。
1)、完全な DIV+CSS コードの例:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-a{ float:left;width:49%;border:1px solid #F00} 
.div-b{ float:left;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-a">第一个DIV盒子</div> 
<div class="div-b">第二个DIV盒子</div> 
</body> 
</html>

ログイン後にコピー

2)、3 番目の DIV が横に並ばないよう、DIV を 1 行 2 列にレイアウトする場合は、幅に注意する必要があります。ここで幅を設定して計算する必要があります (ここでパーセンテージを設定します。幅は 49%)。3 つの DIV ボックスの幅の合計は親の幅より大きく、2 つの DIV の幅の合計は親の幅より小さい場合、並べて実現できる DIV は 2 つだけです。
3) 2 番目のケースでは、float 値が異なります。1 つは float:left に設定され、もう 1 つは float:right に設定されます。
完全なHTMLソースコード:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-c{ float:left;width:49%;border:1px solid #F00} 
.div-d{ float:right;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-c">第三个DIV盒子</div> 
<div class="div-d">第四个DIV盒子</div> 
</body> 
</html>

ログイン後にコピー

2. DIVs_CSSの水平配置複数のdivボックスを並べて表示し、divを水平に配置するにはどうすればよいですか?

最初に、CSS スタイルを設定せずに 3 つの div ボックスオブジェクトをセットアップして、効果を確認します。コードは次のとおりです:
一緒に表示されない div のスクリーンショット
3 つの div ボックスが排他的な行に表示されます
div ボックス自体のデフォルトのスタイル属性は、排他的な行を占有します。通常、この問題を解決するには 2 つの方法があります。 div が排他的な行を占める問題は、1 つは float を設定すること、もう 1 つは表示スタイルを設定することです。次にdivボックスのオブジェクトを横に並べて横に表示する問題の解決方法を記事＋写真＋事例で紹介していきます。
1. 並べて表示するには css float を使用します
並べて表示する div ボックスの合計幅が 1 である限り、div に float 属性を設定することで、並べて表示の問題を解決できます。最も外側のボックスの幅以下であれば、複数の div オブジェクトを並べて表示できます。
floatを追加してdivボックスの並べて表示を実現
floatを追加して複数のdivを並べて表示を実現
ここでは、必要に応じてdivにfloatを設定します。 div オブジェクトを連続して表示するには、css クラスを追加します。CSS セレクター設定のフロートを表示します。他の不要な設定がフローティングスタイルに追加されないようにします。
2. CSS 表示を使用して div ボックスオブジェクトを並べて表示します。
div ボックスオブジェクトを並べて表示するには、display:inline を追加することで問題を解決できます。水平方向に並べて表示する必要のない他の div ボックスオブジェクトを区別するために、同じ行に表示する必要がある隣接する div ボックスには統一された太字の CSS クラスを使用します。CSS の名前は「.div-」です。列をなして"。
CSS コードは次のとおりです:

.div-inline{ display:inline}

ログイン後にコピー

Html コードスニペット:

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

ログイン後にコピー

3. 概要: 並べて表示するには、float または display のどちらでも、並べて表示したい場合は、まず、横に並べて表示できるように、全体の幅がオブジェクトの上部の幅以下である必要があります。ディスプレイは水平配置と植字レイアウトを実現します。

以上がCSS で並べて表示される複数の div ボックスのコード共有の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

サムスンはマイクロソフトの MR ヘッドセットにディスプレイを提供する予定で、デバイスはより軽量でより鮮明なディスプレイを備えていることが期待されています Aug 10, 2024 pm 09:45 PM

最近、Samsung Display と Microsoft は重要な協力協定を締結しました。合意によると、Samsung Displayは、ゲームや映画などのマルチメディアコンテンツ向けのMRデバイスを開発しているMicrosoftに、数十万枚の複合現実(MR)ヘッドマウントデバイス用のOLEDoSパネルを開発、供給する予定だ。 OLEDoSの仕様決定後に発売され、主に商用分野向けに提供され、早ければ2026年にも提供される予定だ。 OLEDoS (OLED on Silicon) 技術 OLEDoS は、シリコン基板上に OLED を蒸着する新しいディスプレイ技術であり、従来のガラス基板と比較して、より薄く、より高い画素数を実現します。 OLEDOS表示と通常表示

プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。