反应中图像叠加的基础 6 网格问题

Problems with foundation 6 grid on img overlay in react

我是第一次使用 foundation 6 xy 网格,在对齐三张图片时遇到了困难,每张图片的底部都有文字叠加。我努力让文本背景填充图像的整个宽度,同时使其具有响应性,newsArticle__pCont class 的 100% 宽度大于我不理解的父单元格。下面是我得到的最接近的(不是很接近)

class News extends Component {

    renderArticlePreview(article) {
        if(articleCount <= 2) {
            articleCount++;
            return (
                <div key={article.id} className="cell small-12 medium-4 newsArticle__cont--firstThree">
                    <img className="newsArticle__img--overlay" src={article.imageUrl} />
                    <div className="newsArticle__pCont">
                        <a href={"/article/" + article.id}><p className="newsArticle__title--overlay">{article.title}</p></a>
                    </div>
                </div>
            )
        }
    }

    render() {
        const { news } = this.props;

        return (
            <div>
                <Header />
                <div className="grid-container">
                    <div className="grid-x grid-padding-x newsArticle">
                        { news.map((article) => this.renderArticlePreview(article)) }
                    </div>
                </div>
            </div>
        )
    }
}

export default News;

.scss

@import './Helpers.scss';

.newsArticle {

    .newsArticle__cont--firstThree {
        position: relative;
    }

    .newsArticle__title {
        text-align: center;
        font-size: 24px;
        font-weight: 500;
        color: #000000;
    }

    .newsArticle__title--overlay {
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        margin-bottom: 0px;
    }

    .newsArticle__pCont {
        background-color: rgba(0, 94, 154, 0.75);
        height: 45px;
        position: absolute;
        bottom: 0px;
        z-index: 10;
        width: 100%;
    }

    @include screen(sm-only) {
        .newsArticle__img {
            margin-top: 10px;
        }
    }

    @include screen(md) {
        .newsArticle__img {
            margin: 10px;
        }

        .newsArticle__p {
            margin: 10px;
        }
    }
}

所以您现在的文字太大的原因是

  1. 绝对位置(将其从流中移除,因此它不是 包含在单元格本身的填充中)
  2. width: 100%,这将使其达到父级的全宽(包括填充)。

解决此问题的最简单方法是从 padding-x(装订线实际上在单元格内,单元格宽度包括装订线)切换到 margin-x(装订线由边距完成,因此单元格宽度不包括排水沟)。这会将您的网格更改为:

<div className="grid-x grid-margin-x newsArticle">

代码笔显示:https://codepen.io/kball/pen/zEGoaR