当先锋百科网

首页 1 2 3 4 5 6 7

在网页布局中,经常需要将不同的元素分布到不同的区域中。这时候就需要使用CSS的div标签来实现。div标签可以将一个区域划分出来,方便进行样式的控制。接下来,我们将介绍如何将两个div分别放置在页面的左右两侧。

css div分布在两边

首先,在HTML文档中添加两个div标签。一个用于左侧,一个用于右侧。代码如下:


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

接下来,我们需要使用CSS来对这两个div进行布局。我们可以通过设置宽度、浮动和边距等样式来实现。具体代码如下:


#left {
    width: 50%;
    float: left;
    margin-right: 10px;
}

#right {
    width: 50%;
    float: right;
    margin-left: 10px;
}

上述代码中,我们设置左侧div的宽度为50%,并将其向左浮动。同时,我们设置右侧div的宽度也为50%,并将其向右浮动。为了保证两个div之间有一定距离,我们给左侧div添加右边距,给右侧div添加左边距。

最后,我们需要添加内容到左右两个div中,以展示效果。可以根据自己的需求进行添加。此时,两个div就已经成功分布在了页面的左右两侧。