之前想要实现Web页面效果：
然后去小程序中实现，结果右边的值，超过一行后，显示就错乱了：
不会换行增加高度了。
目前代码是：
<view class='detail_items'>
<view class='detail_item_row'>
<label class='detail_item_key'>作者: </label>
<text class='detail_item_value'>{{curBookInfo.authorsStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>插画师: </label>
<text class='detail_item_value'>{{curBookInfo.illustratorsStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>系列: </label>
<text class='detail_item_value'>{{curBookInfo.seriesNameAndNumber}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>兰斯指数: </label>
<text class='detail_item_value'>{{curBookInfo.lexileStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>xxx等级: </label>
<text class='detail_item_value'>{{curBookInfo.xxxStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>参考年龄: </label>
<text class='detail_item_value'>{{curBookInfo.ageStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>题材: </label>
<text class='detail_item_value'>{{curBookInfo.genreStr}}</text>
</view>
<view class='detail_item_row'>
<label class='detail_item_key'>页数: </label>
<text class='detail_item_value'>{{curBookInfo.pagesStr}}</text>
</view>和：
.detail_item_row{
min-height: 30px;
max-height: 30px;
margin-left: 20px;
margin-right: 20px;
margin-top: 0;
margin-bottom: 0;
border-bottom: 1px solid rgb(221, 221, 221);
}
.detail_item_key{
font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
font-size: 14px;
color: rgb(102, 102, 102);
display: inline-block;
width: 101px;
}
.detail_item_value{
font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
font-size: 14px;
color: rgb(51, 51, 51);
}想办法解决问题。
感觉或许是：
不应该用text？
该改用view？view可以自动增加高度？
去试试
<view class='detail_items'>
<view class='detail_item_row'>
<label class='detail_item_key'>作者: </label>
<view class='detail_item_value'>{{curBookInfo.authorsStr}}</view>结果是换行了，但是都不在一行了：
结果把之前的最高高度改了后：
.detail_item_row{
min-height: 30px;
max-height: 60px;其他字段就正常换行了：
【总结】
此处想要尝试去优化为更完美的：右边的值的宽度内，自动换行
但是会导致更多的其他问题：
每行内元素不对齐，且“系列”的值，却不左边对齐了。。
然后也没找到更好办法去解决这些问题。
所以目前暂时还是用：
.detail_item_row{
min-height: 30px;
max-height: 60px;
margin-left: 20px;
margin-right: 20px;
margin-top: 0;
margin-bottom: 0;
border-bottom: 1px solid rgb(221, 221, 221);
/* display: flex; */
/* text-align:center;
justify-content: center; */
}
.detail_item_key{
font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
font-size: 14px;
color: rgb(102, 102, 102);
display: inline-block;
width: 101px;
}
.detail_item_value{
font-family: "PingFangSC-Regular", "Microsoft Yahei", "微软雅黑", "Heiti SC";
font-size: 14px;
color: rgb(51, 51, 51);
/* margin-left: 0;
padding-left: 0;
position: relative; */
}保留之前web的效果：
然后再去解决：
【已解决】绘本查询小程序的详情页的右边值换行没有对齐
转载请注明：在路上 » 【已解决】小程序中右边的值多行显示错乱