資料結構
網路
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 用於設定專案的長度，值是繼承、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+ 次瀏覽
