我在我的一个React网络应用程序的布局上遇到了一些麻烦。虽然它大部分都能按我想要的那样工作,但情况是这样的。
以下是相关React代码:
<React.Fragment>
<div className="container">
<div className="row">
<div className="col-xl-12-w">
<h1 className='blocTit'>{displayTitle}</h1>
</div>
</div>
<div className="row">
<div className="col-xl-12-w">
{clctnBufr.map((item,index) => (
<div
key={item.uid}
className="card float-left"
style={{ width: "18rem", marginRight: "1rem" }}
>
<div className="card-body">
<div className="card-tit-prx">
<div className="card-title">
{displayName(item)}
</div>
<div className="card-price">
{displayPriceC(item.price,this.priceShft,currency)}
</div>
</div>
{displayComment(item)}
</div>
</div>
))}
</div>
</div>
</div>
</React.Fragment>
而这是我认为是相关的CSS代码:
.card-body {
display: flex;
flex-direction: column;
border: 1px solid rgb(117, 61, 5);
background-color: rgb(228, 245, 131);
padding-block: 5px;
}
.card-tit-prx {
display: flex;
flex-direction: row;
align-self: stretch;
justify-content:space-between;
}
.card-title {
color: rgb(52, 8, 155);
font-family: 'Georgia';
font-weight: normal;
font-size: 23px;
padding-left: 2%;
}
.card-price {
color: rgb(185, 73, 28);
font-family: 'Verdana';
font-weight: normal;
font-size: 17px;
padding-right: 2%;
}
下图是显示最后3项问题的屏幕截图,其中部分文本(即:“葱”,“满足”)是溢出的方块外,而不是在里面作为其余的文本。
我也曾尝试过在上下文之外重现这个问题,但没有成功。所以我想知道我是否错过了什么。如果有人知道如何进一步调查,甚至更好地解决这个问题,我会很高兴。
这里是一些更多的信息。通过插入一个空格在显示的价格(见下面的第二个屏幕截图),它使它采取2行和框得到一个适当的大小作为结果。为什么它没有得到这个大小时,名称(左部分)是需要它是一个谜。
但是我不想在显示价格的时候必须插入一个空格!这就是问题所在。
1条答案
按热度按时间dl5txlt91#
我花了一些时间挖掘后终于解决了这个问题。
以防有人碰巧在打类似的案子时读到这篇文章,我报告我所做的。
一个教训似乎是:“在项目中的两个或多个不同位置定义同一CSS项不是一个好主意”。