基礎6網格在img覆蓋的問題反應

我第一次使用基礎6 xy網格，並且難以對齊三個圖像，每個圖像底部都有一個文本覆蓋圖。我努力讓文本的背景填充圖像的整個寬度，同時使它響應，newsArticle__pCont類的100％寬度大於我不明白的父單元格。下面是最近的，我已經得到了（這是不是很接近）基礎6網格在img覆蓋的問題反應

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; 
     } 
    } 
}

來源

2017-09-13 jSutcliffe90

所以，你的文字，現在是過大的原因是因爲它是

絕對位置（將其從流中取出，因此它不是由單元格本身的填充所包含的）
寬度：100％，其中wil我把它拿到父母的全部寬度（包括填充）。

解決這個問題的最簡單方法是從padding-x（水槽實際上在單元格內，單元格寬度包括水槽）切換到margin-x（水槽由邊距完成，所以單元格寬度不包括排水溝）。這會改變你的網格，看起來像：

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

一個codepen顯示此：https://codepen.io/kball/pen/zEGoaR

來源

2017-09-15 04:15:23 kball

你被點上，它的工作，立竿見影。是隻是我還是新的xy網格非常惱人的額外的標記需要做它以前的默認行爲，如添加邊距和填充類？我可以理解他們爲什麼改變了這種方式，但卻無法感受到很多獎勵的缺陷 – jSutcliffe90

它的權力有點複雜 - 對於簡單的案例肯定有點令人沮喪，但更強大和容易構成複雜的情況。 – kball

基礎6網格在img覆蓋的問題反應

回答

相關問題