HTML CSS – 在同一行上左右对齐两个div

在本文中，我们将介绍如何使用HTML和CSS实现在同一行上左右对齐两个div的效果。

阅读更多：HTML 教程

设置HTML结构

首先，在HTML中设置两个div，分别表示要左右对齐的内容。代码如下所示：

<div class="left">
  左对齐的内容
</div>
<div class="right">
  右对齐的内容
</div>

CSS样式设置

接下来，使用CSS样式来实现左右对齐的效果。我们可以使用float属性和width属性来达到我们想要的效果。具体的CSS代码如下：

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

在上述代码中，我们将左边的div设置为左浮动，右边的div设置为右浮动，并且将宽度设置为50%。这样两个div就能够左右对齐并且占据同一行的空间。

示例演示

为了更好地理解这个效果，我们可以看下面的示例演示。首先，我们使用以下HTML代码和CSS代码来生成页面：

<!DOCTYPE html>
<html>
<head>
  <title>左右对齐示例</title>
  <style>
    .left {
      float: left;
      width: 50%;
      background-color: #ccc;
    }

    .right {
      float: right;
      width: 50%;
      background-color: #eaeaea;
    }
  </style>
</head>
<body>
  <div class="left">
    <h2>左对齐的标题</h2>
    <p>这是左对齐的内容。</p>
  </div>
  <div class="right">
    <h2>右对齐的标题</h2>
    <p>这是右对齐的内容。</p>
  </div>
</body>
</html>

在上述示例中，左侧的div设置了灰色的背景颜色，右侧的div设置了浅灰色的背景颜色，以便更好地区分两个区域。

当你将上述代码保存为一个HTML文件并在浏览器中打开时，你将看到左右两个div在同一行上左右对齐的效果。