ホームページ > 記事 > ウェブフロントエンド > CSSで2つのdivを同じ行に表示させる方法
CSSで2つのdivを同じ行に表示させる方法
- 青灯夜游オリジナル
- 2021-03-05 11:58:1960735ブラウズ
2 つの div を同じ行に表示する方法: 1. 2 つの div 要素に「display:inline;」または「display:inline-block;」スタイルを設定して、それらを inline 要素または inline Block に変換します。要素で十分です。 2. 2 つの div 要素に「float:left;」スタイルを設定します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
HTML では、div 要素はブロック要素であり、各ブロックレベル要素が独自の行を占めるため、複数の div 要素を 1 行に表示することはできません。
では、2 つの div を同じ行に表示するにはどうすればよいでしょうか?以下に紹介させていただきます。
方法 1: 表示属性を使用して、インライン要素またはインライン ブロック要素に変換します。
表示属性は、生成される表示ボックスのタイプを定義するために使用されます。レイアウト作成時に要素ごとに指定します。
display:inline;: 要素は、要素の前後に改行を入れずに、インライン要素として表示されます。display:inline-block;: 要素は、要素の前後に改行を入れずに、インライン ブロック要素として表示されます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
display: inline-block;
/*display:inline;*/
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>レンダリング:
[推奨チュートリアル: CSS ビデオチュートリアル ]
方法 2: float を使用して Div を並べて表示する
float 属性を設定することで、並べて表示できない問題を解決できます。並べた div ボックスの合計幅が最も外側のボックスの幅以下である場合、複数の div オブジェクトを並べて表示できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div>div测试文本！</div>
<div>div测试文本！</div>
</body>
</html>レンダリング:
float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
置換されていない要素が浮動している場合は、明示的な幅を指定します。それ以外の場合は、可能な限り狭くなります。
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSSで2つのdivを同じ行に表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。