[分享]css中左右两个div错开

CSS中有一种常见的布局方式是让左右两个div错开，这种布局方式可以让网页看起来更加美观，但是也需要注意一些细节。以下是一份简单的CSS代码，展示了如何实现这种布局方式。/ 定义两个div，分别为le...

CSS中有一种常见的布局方式是让左右两个div错开，这种布局方式可以让网页看起来更加美观，但是也需要注意一些细节。以下是一份简单的CSS代码，展示了如何实现这种布局方式。

/* 定义两个div，分别为left和right */
#left {
  width: 50%;
  float: left;
}

#right {
  width: 50%;
  margin-left: 50%;
}

/* 设置左右两个div的样式 */
#left p {
  margin-top: 0;
}

#right p {
  margin-top: 0;
  margin-right: 10%;
}

/* 给左右两个div添加背景色 */
#left {
  background-color: #f2f2f2;
}

#right {
  background-color: #fff;
} 

首先，我们定义了两个div，其中#left的宽度为50%，并且浮动到了左侧；#right的宽度同样为50%，但是它的左边距为50%，相当于一开始是隐藏在左边的。

然后，我们给左右两个div分别设置了样式。由于它们都包括了p标签，我们把它们的上边距都设为0，避免出现多余的空白。同时，为了让右侧的div更加美观，我们还给它的右边距设了一个10%的值。

最后，我们给左右两个div添加了背景色，这样网页看起来就更加清晰明了了。