如何放置兩個div
在HTML中並排？

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

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

透過樣式設定，我們可以將兩個div類並排放置。

語法

以下是<div>標籤的語法。

<div class='division'>Content…</div>

示例1

以下是如何使用CSS屬性在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>
      .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

在另一個將兩個<div>標籤並排新增的示例中，我們使用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>

新增父<div>標籤

我們還可以新增一個父級來放置兩個div類。這裡，父<div>標籤充當子類（HTML元素）的容器。

我們也可以使用CSS屬性設定父<div>的樣式。

語法

以下是包含兩個子<div>標籤的父<div>標籤的語法。

<div class='parent'>
   <div class='division'>Content…</div>
   <div class='division'>Content…</div>
</div>

示例1

下面是一個在HTML中將兩個<div>標籤並排放置的示例，在這個程式中，我們使用了一個父類來在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>

以下是上述示例程式的輸出。

更新於：2022年10月19日

9K+ 瀏覽量

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.