2 つの HTML5 div を 1 行に配置できますか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

2 つの HTML5 div を 1 行に配置できますか?

青灯夜游

Apr 25, 2022 pm 05:32 PM

html5

HTML5 の div 要素は、デフォルトでは 1 行に 2 つ配置できません。 div はブロックレベルの要素です。1 つの要素が 1 行を占めます。デフォルトでは 2 つの div を同じ行に表示できません。ただし、div 要素に「display: inline;」スタイルを追加して、インライン要素に変換できます。要素を追加することで複数の div を実現でき、div は同じ行に表示されます。

2 つの HTML5 div を 1 行に配置できますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

html5 の div 要素は、デフォルトでは 1 行に 2 つ配置できません。

div はブロックレベルの要素であり、1 つの要素が 1 行を占めるため、デフォルトでは 2 つの div を同じ行に表示できません。

2 つの HTML5 div を 1 行に配置できますか?

ブロックレベル要素の主な特徴は、単独で行を占有することです。

ブロックレベル要素の主な特徴は次のとおりです。次のとおりです:

改行タグが使用されているかどうかに関係なく、ブロックレベルの要素は常に新しい行で始まります;

ブロックレベル要素の幅、高さ、および外端スペースとパディングを制御できます;

ブロックレベル要素の幅が省略された場合、その幅はデフォルトの幅になります。現在のブラウザウィンドウの

ブロックレベル要素には、他のインライン要素とブロックレベル要素を含めることができます。

ただし、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>

ログイン後にコピー

(学習ビデオ共有: 2 つの HTML5 div を 1 行に配置できますか? css ビデオチュートリアル

、

Web フロントエンド)

以上が2 つの HTML5 div を 1 行に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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