反应中图像叠加的基础 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;
}
}
}
所以您现在的文字太大的原因是
- 绝对位置(将其从流中移除,因此它不是
包含在单元格本身的填充中)
- width: 100%,这将使其达到父级的全宽(包括填充)。
解决此问题的最简单方法是从 padding-x(装订线实际上在单元格内,单元格宽度包括装订线)切换到 margin-x(装订线由边距完成,因此单元格宽度不包括排水沟)。这会将您的网格更改为:
<div className="grid-x grid-margin-x newsArticle">
我是第一次使用 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;
}
}
}
所以您现在的文字太大的原因是
- 绝对位置(将其从流中移除,因此它不是 包含在单元格本身的填充中)
- width: 100%,这将使其达到父级的全宽(包括填充)。
解决此问题的最简单方法是从 padding-x(装订线实际上在单元格内,单元格宽度包括装订线)切换到 margin-x(装订线由边距完成,因此单元格宽度不包括排水沟)。这会将您的网格更改为:
<div className="grid-x grid-margin-x newsArticle">