CSSで4つのdivを並べて表示するように設定する方法-CSSチュートリアル-php.cn

CSSで4つのdivを並べて表示するように設定する方法

青灯夜游

リリース： 2023-01-07 11:44:44

オリジナル

11881 人が閲覧しました

CSS で 4 つの div を並べて設定する方法: 1. float 属性を使用して 4 つの div を浮動表示します。 2. "display:inline;" または "display: inline-block;" スタイルを使用して、4 つの div を inline 要素または inline block 要素に変換します。

CSSで4つのdivを並べて表示するように設定する方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

レンダリング:

CSSで4つのdivを並べて表示するように設定する方法

## float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フローティング要素は、要素のタイプに関係なく、ブロックレベルのボックスを作成します。

方法 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>

ログイン後にコピー

レンダリング:

CSSで4つのdivを並べて表示するように設定する方法 ## 表示属性は、要素によって生成される表示ボックスを定義するために使用されます。レイアウトタイプを作成します。