【前端】ionic4 班课作答记录分两列，使用div实现

最新推荐文章于 2022-09-06 13:58:10 发布

原创最新推荐文章于 2022-09-06 13:58:10 发布 · 626 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4 #div分两列 #思路

项目同时被 2 个专栏收录

42 篇文章

订阅专栏

【前端】

31 篇文章

订阅专栏

本文介绍了一种使用div和CSS属性实现前端数据两列显示的方法，避免了数据预先分组的复杂性，通过float和width属性轻松实现了响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

小编最近做项目时，遇到一个将数据分成两列显示，由于之前使用<ion-col>标签比较顺手，思维定式的便想到了这个做法，没有想到中间的实现过程很是曲折，具体看一下我的跌宕的历程吧。

跑偏的思路--数据分成两个集合

一、ion-col实现两列

二、后端数据需要分成两个集合

三、出现问题--数据处理麻烦

大神指点--使用div形成两列

一、div样式

只需要两个CSS属性：float、width

<div style="float:left;width:50%;" *ngFor="let list of lists; let j = index">

</div>

二、详细代码

使用<ion-card>、<ion-row>、<ion-col>等标签，实现分列效果：

 <!-- 显示数据 -->
    <div style="float:left;width:50%;" *ngFor="let list of lists; let j = index">
        <ion-card class="welcome-card" [ngStyle]="{'background-color':list.remark}"
            (click)="goToIssue(list.brainStormingId,j)">
            <!-- card框的颜色 -->
            <ion-row>
                <span style="font-size: 13px;margin: 7%;">{{list.userName}}</span>
            </ion-row>
            <ion-row style="margin-top: 4%;margin-left: 4%;font-size: 18px;">
                <div style="font-size:18px;">
                    {{list.content}}
                </div>
            </ion-row>
            <hr style=" height:2px;border:none;border-top:2px dotted #ffffff;" />

            <ion-row>
                <ion-col>
                    <span style="font-size: 7px;"
                        *ngIf="list.updateTime==undefined">{{list.createTime}}</span>
                    <span style="font-size: 7px;"
                        *ngIf="list.updateTime!==undefined">{{list.updateTime}}
                    </span>
                </ion-col>
                <ion-col>
                    <span style="font-size: 15px;float: right;">{{list.likedNumber}}</span>
                    <ion-icon [ngStyle]="{'color':!isThumbUpArray[j]  ? 'gray' : '#FA8072' }"
                        style="font-size: 150%;padding-bottom: 25%;color: gray;padding-right: 4%;float: right;"
                        name="thumbs-up" (click)="thumbUp(list,j)"></ion-icon>
                </ion-col>
            </ion-row>
        </ion-card>
    </div>

三、具体效果