将div与另一个div

Question

divs out of alignment

这些是使用不同长度的文本动态添加的内联块div。 我尝试为div设置相同的高度，为文本和填充文本设置相同的行高，使它们的长度相同，但这些div仍然是错误对齐的。 有没有css技巧或JS黑客为此？感谢。

SCSS：

.cards-container {
        border: 1px solid white;
        margin: auto;
        margin-top: 2em;
        width: 80%;
        .transition-wrapper {
            border: 1px solid yellow;
            display: inline-block;
            margin: 0.2em;
            width: $card-width + 10;
            height: $card-height + 10;
            .card-wrapper {
                position: relative;
                border: 1px solid grey;
                border-radius: 2px;
                width: $card-width;
                height: $card-height;
                margin: auto;
                top: 50%;
                transform: translateY(-$card-height / 2);
                .stock-card {
                    text-align: center;
                    border-left: 3px solid $hacker-green;
                    border-top-left-radius: 1px;
                    border-bottom-left-radius: 1px;
                    width: $card-width;
                    height: $card-height * .975;

                    transition: all 0.3s ease;
                    color: white;
                    &:hover {
                        border-left: 5px solid red;
                        border-top-left-radius: 1px;
                        border-bottom-left-radius: 2px;
                    }
                    .stock-symbol-wrapper {
                        border: 1px solid blue;
                        height: $card-height * .975 * (1/4);
                    }
                    .stock-name-wrapper {
                        border: 1px solid red;
                        height: $card-height * .975 * (3/4);
                    }
                }
                .stock-card > * {
                    vertical-align: middle;
                }
                .icon {
                    position: absolute;
                    top: 0;
                    right: 0;

                    &:hover {
                        cursor: pointer;
                    }
                }
            }
        }
    }

JSX

<div className='cards-container'>
                {stockInfo.map((si, i) => {
                    const sym = si[0];
                    const name = si[1];
                    return (<div className='transition-wrapper' onMouseEnter={(evt) => {registerCardSymbol(evt); toggleIcon()}}
                        onMouseLeave={(evt) => {deregisterCardSymbol(evt); toggleIconOff()}} id={sym} key={i} >
                        <Transition animation='fade up' duration={300} transitionOnMount={true}>
                            <div className='card-wrapper'>
                                <div className='stock-card' id={sym} >
                                    <div className='stock-symbol-wrapper'>{sym}</div>
                                    <div className='stock-name-wrapper'>{name}</div>
                                    {icon && (cardSymbol === sym) ? <Icon onClick={(evt) => {removeStock(evt); /*registerCardSymbol(evt); toggleIcon()*/}}
                                        id={sym} className='icon' color='grey' name='delete'></Icon> : ''}
                                </div>
                            </div>
                        </Transition>
                    </div>)
                })}
            </div>

Answer 1

使用class Books { public string name; public string description; public double price; 沿顶部边框对齐内联块（默认情况下，它们沿着基线对齐，这是其中最后一行文本）。