在网页布局中,我们经常需要让两个 <div> 并排显示,但是在某些情况下,这两个 <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>
并排显示的效果了。
粉丝
0
关注
0
收藏
0