javascript - react 中图像叠加的基础 6 网格问题

Question

我是第一次使用 foundation 6 xy 网格，在对齐三张图像时遇到了困难，每张图像的底部都有一个文本叠加层。我努力让文本的背景填充图像的整个宽度，同时使其具有响应性，newsArticle__pCont 类的 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;
        }
    }
}

Answer 1

所以你的文字现在太大的原因是因为它是

1. 绝对位置(将它从流中移除，所以它不是 包含在单元格本身的填充中)
2. width: 100%，这将使它达到父级的整个宽度(包括填充)。

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

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

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