对齐具有相同高度和内联的项目

Question

大家好我正在研究React / Redux应用程序，我在调整项目时遇到问题我想对齐蓝色徽章内联是否（是AED 256）低于实际价格是否存在，如果产品没有销售比蓝色徽章转向价格，我想在产品销售与否时对齐所有蓝色徽章，我的截图和代码粘贴在下面，任何人都可以帮助我要解决这个问题，

注：{brandName}，{productName（LINES_TO_SHOW）}，{product.offer＆amp;＆amp; price}，{soldBy}来自contstant，常量存储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;
    }

Answer 1

您很难理解HTML代码与列出的CSS类之间的关系，但如果 .productPrice包含.soldBy作为其最后一个孩子，你可以给.productPrice一个固定的高度（足够高以适应最高可能的内容）并将margin-top: auto添加到.soldBy以将其与其父容器的底部对齐（.productPrice ）。

如果我的推定是错误的，那么编辑问题并列出实际呈现的HTML代码的相关部分会更好。