[分享]css两个div不并排显示

在网页布局中，我们经常需要让两个 并排显示，但是在某些情况下，这两个 却不能正确地并排显示，可能会出现重叠、换行或者不显示等问题。下面就让我们来看看如何解决这个问题。 首先，我们需要给这两个 添...

在网页布局中，我们经常需要让两个 <div> 并排显示，但是在某些情况下，这两个 <div> 却不能正确地并排显示，可能会出现重叠、换行或者不显示等问题。下面就让我们来看看如何解决这个问题。

<div class="left"></div>
<div class="right"></div>

首先，我们需要给这两个 <div> 添加 float 属性，让它们可以浮动到同一行，如下：

.left {
    float: left;
}
.right {
    float: right;
}

此时，我们会发现这两个 <div> 已经并排显示了，但是它们之间可能会存在一些间距，导致不是完全贴在一起，如果希望它们贴在一起，可以设置 margin 属性为 0，如下：

.left {
    float: left;
    margin-right: 0;
}
.right {
    float: right;
    margin-left: 0;
}

如果我们希望这两个 <div> 的宽度不是固定的，而是随着页面大小自适应调整，可以将它们的宽度设置为百分比，如下：

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

至此，我们就可以实现两个 <div> 并排显示的效果了。