資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS建立左對齊文字和右對齊圖示的div？
<div>標籤用於指定一個分割槽。它表示HTML頁面中的一個容器或一個部分。有時，在一個div容器內，需要同時顯示文字和圖示。有時，需要將文字左對齊，同時將圖示放在同一行的右側。
CSS或層疊樣式表是指用於格式化HTML文件的樣式規範。它用於為網頁及其元素設定樣式。
在這篇HTML-CSS文章中，透過三個不同的示例，說明了如何在div標籤內將文字左對齊，圖示右對齊的方法。示例1中，使用CSS的float屬性將文字左對齊，圖示右對齊。示例2中，使用CSS的flex屬性將文字右對齊，圖示左對齊。示例3中，使用表格概念將div內容左對齊和右對齊。
這些示例中使用的圖示
以下標籤用於在這些示例中顯示“相簿”圖示。
<i class="material-icons">album</i>
為此，在html頁面的head部分使用了以下庫。
<link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons">
示例1：使用CSS float建立左對齊文字和右對齊圖示的div。
在這個例子中，為“container”類和“classfor icon”類定義了兩種樣式。對於圖示，使用了屬性float: right。
使用的檔案：divrightleftalign1.html
divrightleftalign1.html的程式碼
<!DOCTYPE html>
<html>
<head>
<title>LEFT TEXT RIGHT ICON</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
background-color:rgb(204, 207, 21);
color:rgb(27, 27, 27);
font-size: 30px;
}
.classforicon {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div>
<p class="text">Sample Music Item 1
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 2
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
<div>
<p class="text">Sample Music Item 3
<span class="classforicon">
<i class="material-icons">album</i>
</span>
</p>
</div>
</div>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟divrightleftalign1.html。檢查結果。
示例2：使用CSS flex建立左對齊文字和右對齊圖示的div。
在這個例子中，定義了三種樣式。對於“main_container”類，使用display: flex。對於“flex_col1”類，使用text-align: left；對於“flex_col2”類，使用text-align: right。
使用的檔案：divrightleftalign2.html
divrightleftalign2.html的程式碼
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.main_container {
display: flex;
background-color: #2e2b2b;
color:beige;
font-size: 20px;
}
.flex_col1 {
flex: 1;
text-align: left;
}
.flex_col2 {
flex: 1;
text-align: right;
}
</style>
</head>
<body>
<div class="main_container">
<b class="flex_col1">
Music Album Number 1
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 2
</b>
<span class="flex_col2">
<i class="material-icons">album</i>
</span>
</div>
<div class="main_container">
<b class="flex_col1">
Music Album Number 3
</b>
<span class="flex_col2">
<i class="material-icons">album
</span>
</div>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟divrightleftalign2.html。檢查結果。
示例3：使用表格建立左對齊文字和右對齊圖示的div。
在這個例子中，定義了三種樣式。對於“tablecontainer”類，使用display: table。對於“table_cell1”類，使用text-align: left；對於“table_cell2”類，使用text-align: right。
使用的檔案：divrightleftalign3.html
divrightleftalign3.html的程式碼
<!DOCTYPE html>
<html>
<head>
<title>Text alignment with icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.tableContainer {
display: table;
width: 100%;
background-color: #189943;
color:rgb(14, 13, 13);
font-size: 20px;
}
.tablecell1 {
text-align: left;
display: table-cell;
}
.tablecell2 {
text-align: right;
display: table-cell;
}
</style>
</head>
<body>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 1
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 2
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
<div class="tableContainer">
<b class="tablecell1">
Music Album Number 3
</b>
<span class="tablecell2">
<i class="material-icons">album</i>
</span>
</div>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟divrightleftalign3.html。檢查結果。
在這篇HTML-CSS文章中，透過三個不同的示例，介紹了建立左對齊文字和右對齊圖示的div的各種方法。在第一個示例中，演示瞭如何使用CSS的float屬性建立右對齊圖示和左對齊文字的div。在下一個示例中，我們使用CSS flex屬性演示了相同的功能。在最後一個示例中，使用CSS的表格概念建立了左對齊文字和右對齊圖示的div。
2K+ 次瀏覽
