資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中水平對齊兩個 div？
division 標籤名稱本身就表明它用於建立分割槽，並在網頁中顯示佈局。DIV 標籤可以應用於文字、影像、導航欄等，可以在這些地方建立單獨的部分。
此標籤包含開始和結束標籤<DIV> </DIV>，如果我們想要分割頁面，則這兩個標籤一起使用。
內容可以是任何型別的資料或影像。DIV 標籤可以用 CSS 樣式化或用 JavaScript 操作，可以透過使用 class 或 id 屬性輕鬆地對其進行樣式化。
DIV 標籤被稱為塊級元素，這意味著它從新行開始，並考慮左右兩側可用的寬度。
並且它包含底部和頂部邊距。<div> 標籤主要被稱為 HTML 元素的容器。使用 div 標籤時，會使用 Class 和 id 屬性。
語法
以下是 DIV 標籤的語法/用法：
<div> Content </div>
示例
以下示例演示瞭如何水平對齊兩個DIV 標籤：
<!DOCTYPE html>
<html>
<head>
<title>HTML div Example</title>
</head>
<body>
<div style="width:150px;float:left;height:100px; background:lightgreen; margin:10px">
First BLOCK
</div>
<div style="width: 150px; float:left; height:100px; background:lightblue; margin:10px">
Second BLOCK
</div>
</body>
</html>
當我們執行以上程式碼時，兩個帶有內聯樣式的 DIV 元素將並排顯示，並帶有指定顏色的矩形框以及在其中指定的文字。
在 HTML 中水平對齊兩個 DIV
使用 CSS，我們可以透過多種方式水平對齊兩個DIV 標籤，例如：
為兩個DIV 使用全域性類
使用Flex 屬性
DIV 的單獨樣式
讓我們嘗試詳細瞭解每種對齊方式及其示例：
為兩個 DIV 使用全域性類
透過使用 class 屬性，將兩個DIV 標籤放在單個父DIV 中。class 屬性的值用於在 CSS 中為 DIV 樣式化。我們將使用float 屬性來定位網頁上的元素。
語法
以下是 float 屬性的語法/用法：
Float: left | right | initial | inherit | none;
float 屬性的上述值表示容器的位置。
inherit 用於從其父元素繼承元素，left 用於將其排列到其右側容器，right 用於將其放置到其左側容器，initial 屬性將其設定為其預設值。
示例
以下示例演示瞭如何為兩個 div 標籤使用全域性類：
在下面的程式中，兩個 DIV 標籤包含在另一個名為 class global 的 div 標籤內。它在<style> 標籤內被呼叫。CSS 中的 float 屬性指定元素的位置。
<!DOCTYPE html>
<html>
<head>
<style>
.global div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
當我們執行以上程式碼時，將在父 div 類“global”內建立兩個 div 元素。子 div 元素將浮動到左側，文字將相應地格式化。
為 DIV 應用 Flex 屬性
此屬性是 CSS 中 grow、shrink 和 basis 的組合。通常，它用於管理柔性事物的長度。它對移動裝置友好，並且易於排列主容器和子元素。
Flex 屬性非常有響應性。無需編輯 HTML 部分，即可輕鬆更改元素的順序。因此，使用 CSS flex，我們可以將兩個 DIV 並排對齊。
語法
以下是flex 屬性的語法或用法：
flex: flex-basis flex-grow flex-shrink | initial | auto| inherit;
以上flex 屬性用於設定元素的靈活長度，屬性值為：
Flex-basis 用於設定專案的長度，其值為 inherit、auto 或後跟 % em、px 或長度單位的任何數字。
Flex-grow 指定一個數字，指示與 flex 容器中剩餘的靈活專案相比，應增長多少。
Flex-shrink 指示一個數字，該數字指定根據剩餘的靈活專案將收縮多少個專案。
示例
以下示例演示了flex 屬性如何設定靈活專案的長度：
<!DOCTYPE html>
<html>
<head>
<style>
.global {
display: flex;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
當我們執行以上程式碼時，將顯示一個父 div 元素 (global) 和兩個在父元素內的子 div 元素。子元素中指定的文字將相應地格式化。
使用 div 標籤的單獨樣式
透過使用style 屬性，可以分別為兩個 div 標籤設定樣式。
語法
以下是為單個 div 元素設定樣式的語法：
<div style="float: left| right| inherit ; width: %”>
示例
以下示例演示瞭如何為各個DIV 設定樣式：
<!DOCTYPE html>
<html>
<body>
<div style="float: right; width: 70%">
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div style="float: left; width: 30%">
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</body>
</html>
當我們執行以上程式碼時，div 標籤將水平顯示 - 第一個排列的 div 標籤向右浮動 70%，第二個 div 標籤向左浮動 30%。
示例
透過更改單個 DIV 標籤的樣式，考慮另一個示例：
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 50%">
<p>TutorialsPoint</p>
<p>HTML</p>
<p>Java</p>
<p>Oracle</p>
</div>
<div style="float: right; width: 50%">
<p><b>Website</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
</div>
</body>
</html>
8K+ 次瀏覽
