我們如何在HTML中將兩個部分並排放置？-html教學-PHP中文網

首頁

web前端

html教學

我們如何在HTML中將兩個部分並排放置？

王林

Aug 31, 2023 pm 04:25 PM

標籤定義 HTML 文件的分割。此標籤主要用於將相似的內容分組在一起，以便於設計樣式。它也用作 HTML 元素的容器，我們可以使用 class 或 id 屬性輕鬆地設定此標籤的樣式。我們可以將內容放置在標記內。

使用CSS屬性，我們可以在HTML中並排放置兩個標籤。

透過樣式設置，我們可以並排放置兩個劃分類別。

我們如何在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。如有侵權，請聯絡admin@php.cn刪除

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。