ホームページ > 記事 > ウェブフロントエンド > CSSで4つのdivを並べて表示するように設定する方法
CSSで4つのdivを並べて表示するように設定する方法
- 青灯夜游オリジナル
- 2021-07-21 15:41:0511929ブラウズ
CSS で 4 つの div を並べて設定する方法: 1. float 属性を使用して 4 つの div を浮動表示します。 2. "display:inline;" または "display: inline-block;" スタイルを使用して、4 つの div を inline 要素または inline block 要素に変換します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
div は、それ自体で 1 行を占有するブロック要素であり、その幅は自動的に親要素の幅を埋めます。複数の div 要素が一緒にあると、自動的に折り返して表示されます。では、複数の div 要素を並べて表示するにはどうすればよいでしょうか?以下にその方法を紹介します。
方法 1: float を使用して div をフローティングにします
並べて配置した div ボックスの合計幅が幅以下である限り、一番外側のボックスでは、複数の div オブジェクトを実装して並べて表示できます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 120px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>レンダリング:
方法 2: display 属性を使用して div をインライン要素またはインライン ブロック要素に変換します
インライン要素またはインライン ブロック要素は、次の方法で行を占有しません。それら自体では、隣接するインライン要素は同じ行に配置され、1 行に収まらなくなるまで分割されません。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
display:inline;
/* display: inline-block; */
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>レンダリング: 
## 表示属性は、要素によって生成される表示ボックスを定義するために使用されます。レイアウト タイプを作成します。
- display:inline;: 要素は、要素の前後に改行を入れずに、インライン要素として表示されます。
- display:inline-block;: 要素は、要素の前後に改行を入れずに、インライン ブロック要素として表示されます。
- (学習ビデオ共有:
以上がCSSで4つのdivを並べて表示するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。