收藏
回答

请教一个css排版的问题?

想实现如下图的效果:

想让自动适应宽度:

			<view class="item-content">
				<view class="item-margin left-item">
					<text class="content-text">昵称</text>
				</view>
				<view class="item-margin right-item">
					<view class="right-text">张三</view>
					<image src="/static/imgs/next.png" class="right-image" mode="aspectFit"></image>
				</view>
			</view>
			<view class="usercenter-divider"></view>


CSS:
	.right-text	{
		margin-left: var(--margin-left, 20rpx);
		margin-right: var(--margin-right, 20rpx);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 200rpx;
	}

	.item-margin{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}


	.item-content {
		width: 750tpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}


	.left-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		float: left;
		flex: 1;
	}
	.content-text {
		color: #666;
		font-size: medium !important;
		text-align: center;
		margin-left: var(--margin-left, 20rpx);
	}

	.right-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		float: right;
		margin-right: var(--margin-right, 20rpx);
		flex: 0;
	}
	.right-image {
		width: 30rpx;
		height: 30rpx;
	}
	.usercenter-divider {
		border-top: 1px dashed var(--divider-border-color, #f2f4f7);
		margin-left: var(--margin-left, 10rpx);
		margin-right: var(--margin-right, 10rpx);
	}

 结果在.right-text中,如果不设置width: 200rpx;姓名“张三”是竖排的?怎么样才能不固定设置宽度,而显示正常?
回答关注问题邀请回答
收藏

3 个回答

  • Mr.z
    Mr.z
    06-12

    试下 flex-grow 属性,将剩余空间占满,应该能解决问题

    06-12
    有用 1
    回复 3
    • 李忠
      李忠
      06-13
      小程序中是flex属性吧,代码中有使用,可能没有使用明白
      06-13
      回复
    • 李忠
      李忠
      06-13
      06-13
      回复
    • Mr.z
      Mr.z
      06-15回复李忠
      flex是简写形式,本质上还是flex-grow属性
      06-15
      回复
  • 浮小云
    浮小云
    06-12

    哪边自适应宽?

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    06-12
    有用
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    06-12

    这个弄成代码片段吧不然不好测试

    06-12
    有用
    回复
登录 后发表内容
问题标签