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并排展示的效果了:
左侧内容
右侧内容
粉丝
0
关注
0
收藏
0