如何在HTML中将两个div并排放置？

DIV标签就是一个分区标签，顾名思义，它用于划分网页上的内容。它有助于分离数据，例如文本、图像、导航栏等，我们也可以使用DIV标签创建特定的区域。

DIV标签包含开始和结束标签<DIV> </DIV>，如果要划分页面，这两个标签都是必须的。

DIV标签可以使用CSS进行样式设置或使用JavaScript进行操作，它可以使用class或id属性轻松设置样式。任何类型的数据都可以放在<div>标签内。

示例

以下是<DIV>标签的示例：

Open Compiler
<html>
<head>
   <title>Tutorialspoint</title>
   <style type=text/css>
      p {
         background-color:Red;
         font-size: 35px;
         margin: 8px;
      }
      div {
         color: white;
         background-color: Blue;
         margin: 4px;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <p>How to Represent Div Tags in HTML5</p>
   <div>Welcome To TutorialsPoint</div>
   <div>HTML Tutorial</div>
   <div>CSS Tutorial</div>
</body>
</html>

运行以上程序后，将显示一个带有标题的网页，标题文本分别为白色“欢迎来到Tutorialspoint”、“HTML教程”和“CSS教程”。

在HTML中将两个div标签并排放置

我们已经知道div标签用于创建网页布局。因此，我们可以根据需要使用DIV标签将网页内容的布局排列成并排或上下排列。

语法

要将内容并排排列，语法如下：

<style type=text/css>
   .leftdivision
   {
      float: left;
   }
   .middledivision
   {
      float: left;
      background-color:gray
   }
   .rightdivision
   {
      float: left;
   }
   div {
      padding : 2%;
      color: black;
      background-color: pink;
      width: 30%;
      border: white;
   }
</style>

在上例语法中，float: left表示布局必须从网页的左侧开始。

现在让我们看一些例子来了解更多关于DIV并排的信息

示例

现在让我们看一些例子来了解更多关于DIV并排的信息：

Open Compiler
<!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标签并排放置：

Open Compiler
<html>
<head>  
   <title>Tutorialspoint</title>
   <style type=text/css>
      .leftdivision
      {
         float: left;
      }
      .rightdivision
      {
         float: left;
         background-color:gray
      }
      
      div {
         padding : 5%;
         color: black;
         background-color: pink;
         width: 30%;
         border: solid black;
      }
   </style>
</head>
<body>
   <div class="leftdivision">
      <h1>HTML5</h1>
      <p>HTML5 is hyper text markup language latest version, By using HTML we can create our own websites. It describes the structure of web pages.</p>
   </div>
   <div class="rightdivision">
      <h1>Cascading Style Sheets</h1>
      <p>CSS full form is Cascading Style Sheets, It helps in how HTML elements has to be displayed on screen, It controls the layouts of multiple web pages.</p>
   </div>
</body>
</html>

执行以上代码后，将显示两个DIV标签并排显示，具有不同的背景颜色和特定的文本，但与前面的示例相比，这些DIV标签的高度和宽度有所不同。

更新于：2023年9月29日

49K+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告