ホームページ > ウェブフロントエンド > フロントエンドQ&A > div が HTML で折り返されないようにする方法

div が HTML で折り返されないようにする方法

青灯夜游
リリース: 2021-10-11 16:03:25
オリジナル
18871 人が閲覧しました

htmldiv のラップを防ぐ方法: 1.displays 属性を使用し、「display: inline-block;」スタイルを div タグに追加するだけです。 2. float 属性を使用するには、div タグに「float: left;」スタイルを追加するだけです。

div が HTML で折り返されないようにする方法

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

div はデフォルトで自動的にラップされますが、次の 2 つのメソッドを使用して非ラップを制御できます

1。displays 属性を使用します

display: inline-block;
ログイン後にコピー

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
			    width: 300px;
			    height: 300px;
			    background-color: #20B2AA;
			    display: inline-block;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>
ログイン後にコピー

div が HTML で折り返されないようにする方法

2. float 属性を使用します

float: left;
ログイン後にコピー

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
			    width: 300px;
			    height: 300px;
			    background-color: #00aa00;
			    float: left;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>
ログイン後にコピー

div が HTML で折り返されないようにする方法

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !

以上がdiv が HTML で折り返されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート