HTML divのサイズを設定する方法

Oct 11, 2021 pm 01:51 PM
div html

html div のサイズを設定する方法: div タグ内で、style 属性を使用して、「width: 幅の値の単位;」と「height: 高さの値の単位;」スタイルを設定します。

HTML divのサイズを設定する方法

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

HTML では、

はドキュメント内の分離されたブロックまたは領域を定義できます。

タグは、ドキュメントを独立した異なる部分に分割できます。これは厳密な組織ツールとして使用でき、それに関連付けられた書式設定は一切使用されません。
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div>测试文本</div>
<div>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>
ログイン後にコピー

HTML divのサイズを設定する方法

div タグの幅はデフォルトで全画面表示され、高さはデフォルトでコンテンツの高さになっていることがわかります。

ただし、手動でスタイルを設定することで div のサイズを変更できます:

style 属性を使用して、div の「width: width value Unit;」と「height:」を設定するだけです。タグ。高さの値の単位;」スタイルで十分です。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
  div{
  border: 1px solid red;
  }
  </style>
 </head>
 <body>
<div style="width:200px ;">测试文本</div>
<div style="width:700px ;height: 100px;">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div>
 </body>
</html>
ログイン後にコピー

レンダリング:

HTML divのサイズを設定する方法

推奨チュートリアル: 「html ビデオ チュートリアル

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

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

PHPでHTML/XMLを解析および処理するにはどうすればよいですか?

See all articles