我們如何在HTML中將兩個部分並排放置？
- 王林轉載
- 2023-08-31 16:25:011201瀏覽
標籤定義 HTML 文件的分割。此標籤主要用於將相似的內容分組在一起，以便於設計樣式。它也用作 HTML 元素的容器，我們可以使用 class 或 id 屬性輕鬆地設定此標籤的樣式。我們可以將內容放置在 標記內。
使用CSS屬性，我們可以在HTML中並排放置兩個標籤。
透過樣式設置，我們可以並排放置兩個劃分類別。
文法
以下是 標記的語法。
<div class='division'>Content…</div>
範例 1
以下是使用 CSS 屬性在 HTML 中並排放置兩個劃分類別的範例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.division {
display: inline-block;
border: 1px solid red;
padding: 1rem 1rem;
</style>
</head>
<body>
<!--<div class='parent'>-->
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<!--</div>-->
</body>
</html>
以下是上述範例程式的輸出。
範例 2
在並排新增兩個 標籤的另一個範例中，我們使用 CSS 屬性來設定其樣式，方法是將高度設為 100px，並使用 set_margin 設定邊距 -
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
</body>
</html>
新增父標籤
我們也可以新增一個父級來放置兩個分班。這裡父 標籤充當子類別（HTML 元素）的容器。
我們也可以使用 CSS 屬性來設定父級 的樣式。
文法
以下是父 標記的語法，其中包含兩個子 標記。
<div class='division'>Content…</div> <div class='division'>Content…</div>
範例 1
下面給出了一個在 HTML 中並排放置兩個 標籤的範例，在此程式中我們使用父類別在 HTML 文件中添加更多樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
</div>
</body>
</html>
以下是上述範例程式的輸出。
範例 - 透過建立分割畫面
下面給出了一個範例，透過將螢幕分成兩半來並排放置兩個 div 標籤。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
}
.left {
left: 0;
background-color: yellowgreen;
}
.right {
right: 0;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
以下是上述範例程式的輸出。
以上是我們如何在HTML中將兩個部分並排放置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：如何同時切換按鈕和提交表單？下一篇：如何同時切換按鈕和提交表單？