一个大divl里三个小div水平均匀分布

最新推荐文章于 2024-08-15 14:34:25 发布

「已注销」

最新推荐文章于 2024-08-15 14:34:25 发布

阅读量3.1w

点赞数 4

分类专栏：项目日志

本文链接：https://blog.csdn.net/changfeng6616/article/details/79483614

版权

项目日志专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述

代码：
css代码：

.mainDiv {
    float: left;
    margin-left: 10%;
    width: 80%;
    margin-top: 2%;
    height: 200px;
    background-color: #FFEBCD;

}

.viceDiv_1,.viceDiv_2,.viceDiv_3 {
    float: left;
    background-color: #7FFFD4;
    margin-top: 2% ;
    margin-left: 2.5%;
    width: 30%;
    height: 150px;  
}

html代码：

    <body>
        <div class="mainDiv">
            <div class="viceDiv_1">
            </div>
            <div class="viceDiv_2">
            </div>
            <div class="viceDiv_3">
            </div>
        </div>
    </body>

要点：想好一行的div个数以及间隔宽度，然后通过简单计算得出每个小div占据的宽度百分比和div之间的间隔所占的百分比；
如此例中，共三个div，四个间隔，故每个div宽度占30%，间隔共占10%，每个间隔为2.5%；
注意：这种平均分布的问题一般用百分比形式的设置比较好；
个人浅见，如有谬误，望指正；