微信小程序实现两行交错功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、效果图
• 二、代码
• 总结

---

前言

作为实习前置项目，我给自己定了一个目标，仿政府网站，但是问题是

AI不会写，我也没经验。折腾两天终于做出来了，这里给大家分享。

---

一、效果图

要做成这样上下交错的，但是AI给我推荐了Flex布局和justify-content: space-between; 结果是不行的，做出来是这样的：

二、代码

实现两行交错用的是absolute布局：

HTML

<view class="container">
  <view class="row row1">第一行左接qqqqqqq</view>
  <view class="row row2">第二行右接sssssssss</view>
</view>

CSS

.container {
  position: relative;   /* 作为定位参照 */
  height: 180rpx;       /* 给足高度，防止压在一起 */
  background: #f5f5f5;
  padding: 20rpx 0;     /* 上下留一点呼吸感 */
}

.row {
  position: absolute;
  white-space: nowrap;  /* 防止文字折行 */
}

/* 第一行：整体偏左 */
.row1 {
  left: 150rpx;          /* 离左边很近 */
  height: 15rpx;
  background: #cce5ff;
}

/* 第二行：整体偏右 */
.row2 {
  right: 150rpx;         /* 离右边很近 */
  top: 60rpx;
  background: #d4edda;
}

如果用flex布局做：

HTML

<view class="card-container">

<image class="card-img" src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png" mode="aspectFill"></image>

<view class="picture-content">

<text class="card-title">第二季度返乡创业资源信息清单</text>

<text class="card-time">发布时间：2026-05-28 15:04</text>

</view>

CSS

/* 最外层容器：负责横向排列 */
.card-container {
  display: flex;
  flex-direction: row; /* 明确指定横向 */
  align-items: flex-start; /* 顶部对齐 */
  padding: 20px; /* 使用 px 避免 rpx 换算误差 */
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box; /* 防止 padding 撑大盒子 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 图片样式 */
.card-img {
  width: 120px;  /* 固定宽度 */
  height: 120px; /* 固定高度 */
  border-radius: 8px;
  margin-right: 15px; /* 图片与文字的间距 */
  flex-shrink: 0; /* 绝对禁止图片被压缩 */
  background-color: #f0f0f0; /* 兜底背景色 */
}

/* 文字容器：负责上下分布 */
.picture-content {
  flex: 1; /* 占据剩余所有宽度 */
  display: flex;
  flex-direction: column; /* 纵向排列 */
  height: 120px; /* 关键：高度必须和图片一模一样 */
  justify-content: space-between; /* 上下两端对齐 */
  min-width: 0; /* 解决 flex 布局下文本溢出不生效的顽疾 */
}

/* 标题样式 */
.card-title {
  font-size: 16px; /* 使用 px */
  color: #333333;
  font-weight: bold;
  line-height: 1.4;
  
  /* 防止长文本破坏布局 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示两行 */
  -webkit-box-orient: vertical;
}

/* 时间样式 */
.card-time {
  font-size: 13px; /* 使用 px */
  color: #999999;
  line-height: 1.4;
}

---

总结