我們如何在HTML中將三個部分並排放置？
- WBOY轉載
- 2023-09-04 23:21:051006瀏覽
標籤定義 HTML 文件的分割。此標籤主要用於將相似的內容分組在一起以方便樣式設置，也用作 HTML 元素的容器。
我們使用 CSS 屬性在 HTML 中並排放置三個分割區 標籤。 CSS 屬性 float 用於實現此目的。
文法
下面是 #以下是使用CSS屬性在HTML中將三個分區類別並排放置的範例。 以下是上述範例程式的輸出。 我們透過使用CSS屬性來改變樣式，我們也可以覆寫樣式屬性。 在 HTML 頁面上並排放置三個 標籤的另一個範例如下 - 以下是使用CSS屬性在HTML中將三個分區類別並排放置的範例。 以下是上述範例程式的輸出。 <div class='division'>Content…</div>
Example 1
的中文翻譯為：範例1
<!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 class='division'>div tag 3</div>
</div>
</body>
</html>
Example 2
的中文翻譯為：範例2
<!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>
<div style="width: 100px; float:left; height:100px; background:red; margin:10px">
Third DIV
</div>
</body>
</html>
範例 3 - 透過建立分割畫面
<!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: 50%;
background-color: yellowgreen;
}
.middle{
background-color: blueviolet
}
.right {
right: 25%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split middle"></div>
<div class="split right">
</div>
</body>
</html>
以上是我們如何在HTML中將三個部分並排放置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！