Блог

Я хочу выровнять содержимое карточек таким образом, чтобы , когда заголовок содержимого слишком длинный, другие детали, такие как Created on , By и View , были бы в одной строке. Я пробовал использовать фиксированную высоту min-height для строки заголовка, но я не думаю, что это хорошее решение, так как, когда заголовок короче, будет много белого/пустого пространства.

Я также попытался использовать flex-grow: 1 заголовок, но он также не заполнит пустые места.

          <Col>
            <Card 
                className='text-center' 
                style={{
                    height: '100%',
                    padding: '15px', 
                    borderRadius: '20px',
                    boxShadow: '0px 5px 15px 0px rgb(0 0 0 / 20%)'
                }}
            >
                <Row style={{marginBottom: '5px'}}>
                    <Col md={6} style={{textAlign: 'left'}}>
                        <div 
                            className='btn btn-success'}
                            style={{padding: '5px 25px', borderRadius: '50px', cursor: 'default', textTransform: 'capitalize'}}
                        >
                            {bulletin.liveStatus}
                        </div>
                    </Col>
                    <Col md={6} style={{textAlign: 'right'}}>
                        <div className='ellipsis-menu' ref={ref}>
                            <FaIcons.FaEllipsisH onClick={showDropDown} style={{cursor: 'pointer'}} />
                    </Col>
                </Row>
                <div className='view-bulletin-link'>
                    <Card.Img variant='top' src={imageCoverUrl} style={{objectFit: 'cover', height: '15rem', width: '100%', display: 'block'}}/>
                    <Card.Body>
                        <Card.Title style={{fontSize: '1rem'}}><strong>{bulletin.title}</strong></Card.Title>
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
                    </Card.Body>
                </div>
            </Card>
        </Col>
 

Вы можете достичь этого с помощью flex.

Содержимое карты должно иметь

 flex-direction: col;
align-items: space-around
 

и оберните выровненные сверху и снизу элементы в разные div/промежутки.

Вы могли бы сгруппировать created и view count вместе и сделать его нижним положением.

См. Пример ниже

 <div style="postion:absolute; bottom: 0">
                        <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
                        <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>

</div>