网页设计div盒子布局左右上下分布

div盒子布局是网页设计中常用的一种布局方式，可以实现各种页面结构的排版。其中左右上下分布的布局方式可以通过CSS中的position属性、float属性以及display属性实现。

具体实现方法如下：

1. 左右分布：

使用CSS中的float属性可以实现左右分布的布局方式。设置左边的div的float为left，右边的div的float为right，然后通过设置宽度来控制两个div的位置和大小。

示例代码：

<div class="left">左边的内容</div>
<div class="right">右边的内容</div>

<style>
    .left{
        float: left;
        width: 50%;
    }
    .right{
        float: right;
        width: 50%;
    }
</style>

2. 上下分布：

使用CSS中的position属性可以实现上下分布的布局方式。设置上面的div的position为absolute，top为0，bottom为50%，下面的div的position为absolute，bottom为0，top为50%。

示例代码：

<div class="top">上面的内容</div>
<div class="bottom">下面的内容</div>

<style>
    .top{
        position: absolute;
        top: 0;
        bottom: 50%;
    }
    .bottom{
        position: absolute;
        bottom: 0;
        top: 50%;
    }
</style>

注意：上下分布的布局方式需要给包含两个div的父元素设置position为relative。

希望以上介绍能够帮到您，如果您还有其他问题，欢迎继续提问！