ホームページ > 記事 > ウェブフロントエンド > 2 つの HTML5 div を 1 行に配置できますか?
2 つの HTML5 div を 1 行に配置できますか?
- 青灯夜游オリジナル
- 2022-04-25 17:32:443313ブラウズ
HTML5 の div 要素は、デフォルトでは 1 行に 2 つ配置できません。 div はブロック レベルの要素です。1 つの要素が 1 行を占めます。デフォルトでは 2 つの div を同じ行に表示できません。ただし、div 要素に「display: inline;」スタイルを追加して、インライン要素に変換できます。要素を追加することで複数の div を実現でき、div は同じ行に表示されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
html5 の div 要素は、デフォルトでは 1 行に 2 つ配置できません。
div はブロック レベルの要素であり、1 つの要素が 1 行を占めるため、デフォルトでは 2 つの div を同じ行に表示できません。
ブロックレベル要素の主な特徴は、単独で行を占有することです。
ブロックレベル要素の主な特徴は次のとおりです。次のとおりです:
改行タグが使用されているかどうかに関係なく、ブロックレベルの要素は常に新しい行で始まります;
ブロックレベル要素の幅、高さ、および外端 スペースとパディングを制御できます;
ブロックレベル要素の幅が省略された場合、その幅はデフォルトの幅になります。現在のブラウザ ウィンドウの
ブロック レベル要素には、他のインライン要素とブロック レベル要素を含めることができます。
ただし、display 属性を使用してブロックレベル要素をインライン要素に変換すると、複数の div を同じ行に表示できます。
インライン要素の主な特徴は次のとおりです:
#ブロックレベル要素をインライン要素に変換
- インライン要素の幅、高さ、マージン、およびパディングは変更できません;
インライン要素と他の要素は同じ行に表示されます。
- インライン要素の幅はコンテンツの幅であり、変更できません;
- インライン要素には、テキストまたはその他のインライン要素のみを含めることができます。
ブロックレベル要素に設定display: inline;
ブロックレベル要素をインライン要素に変換できます。例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
div{
background-color: #FFC0CB;
margin: 10px;
}
.box {
display: inline;
}
</style>
</head>
<body>
<div>一个div元素，块级元素</div>
<div>一个div元素，块级元素</div>
<div>一个div元素，转为了行内元素</div>
<div>一个div元素，转为了行内元素</div>
</body>
</html>
(学習ビデオ共有: 
css ビデオ チュートリアル
Web フロントエンド)
以上が2 つの HTML5 div を 1 行に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。