CSS float浮动布局

最新推荐文章于 2024-09-18 15:13:40 发布

crazybai0001

最新推荐文章于 2024-09-18 15:13:40 发布

阅读量207

点赞数

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/crazybai0001/article/details/127693958

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需要实现下图布局，左右两列，左上角box高度比较大，其他box高度比较小，从左向右流程排列：

1、HTML代码

<div class="item" v-for="(item, index) in annualDemandPlanOverviewData.children" :key="index">
    <div class="item-title">{{ item.orgName }}</div>
    <div class="item-volume-wrapper">
        <div class="item-volume-demand-total-wrapper">
            <span>需求总量</span>
            <span class="din">{{ item.demand }}</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item-volume-resource-total-wrapper">
            <span>资源总量</span>
            <span class="din">{{ item.resources }}</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item-volume-gap-total-wrapper">
            <span>缺口总量</span>
            <span class="din">{{ item.gap }}</span>
        </div>
    </div>
</div>

HTML代码和图片上元素对应关系见下图：

2、CSS样式代码

/* 设置每个box的样式 */
.item {
    float: left;    /* 左浮动布局，从左向右排列 */
    width: calc(50% - 10px);    /* 每个元素宽度 */
    height: 95px;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-right: 20px;    /* 每个元素右边距20px */
    box-sizing: border-box;
}
/* 设置第2个元素右边距为0 */
.item-wrapper .item:nth-child(2) {
    margin-right: 0;
}
/* 设置奇数位（第1、3、5 ... 9等）元素右边距为0 */
.item-wrapper .item:nth-child(2n-1) {
    margin-right: 0;
}

经过上述设置即可实现需求。