資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 和 CSS 將文字分成兩列布局？
在 HTML 中，我們有 div 元素，可用於在網頁上建立列分割槽部分。為了填充 div 框內的文字，它使用了段落元素。然後使用內部 CSS 樣式化 HTML 元素的屬性。這種型別的示例用於顯示區分問題，以及當它已透過程式碼設計以獲得更好的外觀時。
語法
以下語法在示例中使用：
<div></div>
div 元素指定 HTML 頁面中的一個分割槽或部分。
<p>…..write some text….</p>
p 元素定義段落，使用者可以在其中編寫一些文字。
使用的屬性
以下屬性在示例中使用：
margin - 此屬性定義元素的邊距。
padding - 此屬性用於定義邊框與其內容之間的空間。
width - 我們可以使用此屬性定義 div 元素的寬度。
float - 此屬性定義 div 元素的左側或右側位置。
background-color - 定義元素的背景顏色。
color - 定義文字的顏色。
font-weight - 定義文字的粗體樣式。
text-align - 此屬性設定文字的水平對齊方式。
border-radius - 定義邊框角的半徑。
示例
在此示例中，我們將建立兩個代表兩列布局的 div 元素。然後使用段落元素填充兩列中的文字。為了設計兩列布局的網頁，我們將使用內部 CSS 設定所有元素的屬性。
<!DOCTYPE html>
<html>
<head>
<title>Two column layout using HTML and CSS</title>
<style>
#container{
width: 450px; }
.col-1{
width: 200px; float: left; color: green; font-weight: bold;
text-align: center; margin: 10px; border-radius: 20px; background: yellow; }
.col-2{
width: 200px; float: right; color: green; font-weight: bold;
text-align: center; margin: 10px; border-radius: 20px; background: orange; }
p{ font-size: 20px; }
</style>
</head>
<body>
<h1> Two Column Layout Using CSS </h1>
<div id = "container">
<div class = "col-1">
<h1 class = "heading">COLUMN 1</h1>
<p class = "paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class = "col-2">
<h1 class = "heading">COLUMN 2</h1>
<p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</body>
</html>
結論
以上輸出表示使用 div 元素的兩列布局，以及使用段落元素在其中填充文字。為了設定所有 HTML 元素的屬性，它使用了內部 CSS。這種型別的程式碼通常用於構建基於區分的問題的設計或基於兩個不同事物的比較。
更新於：2023年6月8日
5K+ 次檢視
廣告