css两个div并行

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中,我们可以通过使用浮动(float)实现两个div并行排列的效果。我们先来看看以下的HTML代码:<div class= container > <d

CSS中,我们可以通过使用浮动(float)实现两个div并行排列的效果。

我们先来看看以下的HTML代码:

<div class="container">
  <div class="left">
    <p>左侧内容</p>
  </div>
  <div class="right">
    <p>右侧内容</p>
  </div>
</div> 

在这段代码中,我们使用了一个名为container的父级div,并在其内部放置了两个名为left和right的子级div。现在,我们来添加一些CSS样式来使它们并排展示。

.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
} 

通过给父级div设置overflow:hidden属性,我们可以让其包含其内部所有的浮动元素。接着,我们分别给左侧和右侧的div设置了相同的宽度,并使用 float:left 和 float:right 将它们浮动到左右两侧。

使用以上的CSS样式,我们就可以实现两个div并排展示的效果了:

左侧内容

右侧内容

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个div并行

粉丝

0

关注

0

收藏

0

已有0次打赏