[分享]css分隔两个div

CSS是一种非常强大的样式表语言，能够让我们更好地控制网页的外观，其中最基础的功能之一就是在页面中分隔两个元素。div { width: 50; / 设置div元素占页面宽度的50 / float: ...

CSS是一种非常强大的样式表语言，能够让我们更好地控制网页的外观，其中最基础的功能之一就是在页面中分隔两个

元素。

div {
  width: 50%; /* 设置div元素占页面宽度的50% */
  float: left; /* 让两个div元素在同一行显示 */
} 

在上述代码中，我们使用了width属性设置了每个div元素的宽度为50%，这意味着两个div元素加起来就占了整个页面的宽度。我们还加了一个float属性，让这两个元素在同一行显示。

接下来，我们可以在两个

元素中分别添加内容，比如图片、文字等等。

<div class="left">
  <img src="image.jpg" alt="美丽的风景">
</div>

<div class="right">
  <p>欢迎来到我的网站！</p>
  <p>我是一名前端工程师，热爱编写CSS代码。</p>
</div> 

在这个例子中，我们创建了两个

元素，一个为左侧图片，另一个为右侧文字。我们给每个元素添加了不同的类名，以便在CSS中更好地控制外观。

通过以上代码，我们成功分隔了两个

元素，让它们在同一行显示，同时也添加了内容。这只是CSS在页面布局中的一小部分，还有许多其他强大的功能等待着我们去发掘和学习。