0
喜對準項的所有，我的反應，和/終極版應用程序的工作，我在調整項目有問題，我要對齊的藍色徽章直列是否（爲AED 256）低於實際價格是否存在或不存在，如果產品沒有出售，比藍色徽章轉向價格，如果產品正在銷售或是沒有出售，我想將所有藍色徽章對齊，我的屏幕截圖和代碼粘貼在下面，任何人都可以幫我排序出這個問題，具有相同的高度和內嵌
注：{名優產品}，{產品名稱（LINES_TO_SHOW）}，{product.offer & &價格}，{} soldBy從contstant來了，常數s撕的className爲造型
class MainProductBox extends React.Component {
render() {
const product = this.props.product;
const catalog = this.props.catalog;
const offer = this.props.product.offer;
const saleColor = this.props.saleColor || '#f77532';
const index = this.props.index || '';
const concatClass = this.props.className || '';
const layout = this.props.layout || 'defaultProductBox';
const percentSold =
layout === 'saleProductBox' && product.offer.stock
? Math.ceil(calculatePercent(product.offer.stock.inStock, product.offer.stock.totalCount))
: 0;
const offerPercent =
product.offer && product.offer.salePrice
? Math.ceil(calculatePercent(product.offer.salePrice.value, product.offer.price.value))
: 0;
const showAdditionalInfo = this.props.showAdditionalInfo;
const price = (
<p
className={styles.productPrice}
itemProp="offers"
itemScope
itemType="http://schema.org/Offer"
>
<span className={styles.sellingPrice} itemProp="price">
{product.offer.salePrice
? I18n.formatCurrency(product.offer.salePrice, { valueClass: styles.priceValue })
: I18n.formatCurrency(product.offer.price, { valueClass: styles.priceValue })}
</span>
{product.offer.salePrice && <span className={styles.preReduction}>
<span>{'productBox.pre-reduction', {}, 'was'}</span> {I18n.formatCurrency(product.offer.price)}
</span>}
</p>
);
const productName = (lines) =>
<Shiitake lines={lines} throttleRate={200} className={styles.productName}>
{product.name}
</Shiitake>;
const brandName = product.brand && product.brand.name ?
<Shiitake lines={1} throttleRate={200} className={styles.brandName}>
{product.brand.name}
</Shiitake> : '';
const soldBy = <div className={styles.sellerCtr}>
{ product && catalog.hits[i].is_fbn &&
<div className={styles.sellerFulfillmentCtr}>
<ShippingBadges showFulfillment />
</div>
}
</div>
}
return (
<div
className={`${styles.basicBoxWrapper} ${productBoxWrapper} ${concatClass}`}
style={{ borderColor: layout === 'saleProductBox' ? saleColor : 'auto' }}
data-dy-product-id={product.sku}
>
<LocaleLink to={Helper.getProductUrl(product)}>
{/* TRENDING NUMBER TAG */}
{layout === 'trendingProductBox' &&
<span className={styles.productTag}>
#<strong>{index}</strong>
</span>}
{/* FLASH SALE PROGRESS */}
{layout === 'saleProductBox' && product.offer && product.offer.stock &&
<div className={styles.percentSoldCtr}>
<div className={styles.percentSoldLabel}>
{I18n.getText(
'productBox.in-stock',
{ percent: percentSold },
'{percent}% sold'
)}
</div>
<div className={styles.soldProgressBar}>
<div
className={styles.soldPercent}
style={{ width: percentSold + '%', background: saleColor }}
/>
</div>
</div>}
{layout === 'verticalProductBox' && brandName}
{topProductName && productName(LINES_TO_SHOW)}
{/* IMAGE AREA */}
<div className={styles.productImageWrapper}>
<div className={styles.productImageContainer}>
<div className={styles.imageWrapper}>
<LazyLoad height={243} once placeholder={placeholder} offset={300}>
<img
src={product.image.thumbUrl}
alt={product.name}
title={product.name}
className={styles.productImage}
/>
</LazyLoad>
</div>
{offerLabel && product.offer && product.offer.salePrice && offerPercent > 5 &&
<span className={`${styles.productTag} ${styles.discountTag}`}>
{I18n.getText(
'product.percent-off',
{ percent: offerPercent },
'{percent}% off'
)}
</span>}
</div>
</div>
{/* PRODUCT DETAILS */}
{layout === 'horizontalProductBox' &&
<div className={styles.productDetailsContainer}>
{brandName}
{productName(4)}
{product.offer && price}
</div>}
{layout === 'verticalProductBox' && product.offer && price}
{/* FLASH SALE DETAILS */}
{layout === 'saleProductBox' && <div className={styles.productDetailsContainer}>
{product.offer && product.offer.salePrice &&
<div className={styles.flashSaleRow} style={{ color: saleColor }}>
<span className={styles.flashSaleLabel}>
{I18n.getText('productBox.flash-sale', {}, 'Flash Sale')}
</span>
<span className={styles.flashSaleDiscount}>
{I18n.getText(
'product.percent-off',
{ percent: offerPercent },
'{percent}% off'
)}
</span>
</div>}
{brandName}
{productName(LINES_TO_SHOW)}
{product.offer && price}
</div>}
{/* DEFAULT BOX DETAILS */}
{layout === 'defaultProductBox' &&
<div className={styles.productDetailsContainer}>
{brandName}
{productName(LINES_TO_SHOW)}
{showAdditionalInfo &&
<div>
{hasReviews &&
<div className={styles.ratingBadgesCtr}>
<StarsIconRating
size={11}
score={parseInt(product.review.score) || 0}
count={parseInt(product.review.count) || 0}
showCount
/>
</div>}
</div>}
{product.offer && price}
{soldBy}
</div>}
</LocaleLink>
</div>
);
}
}
CSS
.productName {
font-size: $fontSize-sm;
min-height: 12*1.3*4px;
}
.productPrice {
position: absolute;
bottom: 0; left: 0;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.preReduction {
font-size: $fontSize-xsm;
display: inline-block;
margin-left: 6px;
}
.sellingPrice {
font-size: $fontSize-med;
display: inline-block;
}
解決這個問題的唯一方法就是單獨使用CSS，或者每個子項目（圖像/主題/價格/按鈕）需要固定高度，能夠允許1或2條額外的線條彼此重疊，或者它們都需要成爲兄弟姐妹。 – LGSon