正確創建文章部分

我正在爲每篇文章創建一篇文章欄。我想知道如何響應地添加部分之間的空間，目前如果該部分的文本很長，它可以重疊我的hr標記並進入我的下一部分。只有在移動設備上查看此問題時才能看到此問題。正確創建文章部分

我發表天青爲更好的視野http://testingwebground.azurewebsites.net/如果我縮小寬度儘可能小，它顯示了以下

<section> 
     <div class="row"> 
     <div class="row-sm-height"> 
      <aside class="col-sm-6"> 
      <a> 
      <img src="http://bandwagonbible.com/Stories/NFLBeginnersGuide/Image1.JPG" /> 
      </a> 
      </aside> 
      <aside class="col-sm-6"> 
      <div> 
       <span> <a id="Article_Category">Football</a></span> 
       <h2 id="Article_Header2"> 
           Beginners Guide to Bandwagoning: The 4 Things You Need To Know About How the NFL Works 
          </h2> 
       <span id="Article_Date">November 12, 2015</span>     
      </div> 
      </aside> 
     </div> 
     </div> 
     <hr> 
</section>

來源

2016-02-27 Master

圖像的問題是在你的高度定義＃Article_Header2

#Article_Header2 { 
    height: 48px; 
    font: normal normal normal normal 16px/normal 'Roboto Condensed', sans-serif; 
    margin: 0px; 
}

如果要保留48px的最小高度，則可以使用最小高度代替。就像這樣：

#Article_Header2 { 
    min-height: 48px; 
    font: normal normal normal normal 16px/normal 'Roboto Condensed', sans-serif; 
    margin: 0px; 
}

像你這樣的元素之間添加空格時，我通常會做的事情是從添加邊距所有元素（在你的情況的文章），並刪除保證金：第一子。

來源

2016-02-27 16:48:21 dsasko

嗨Dsasko，它絕對固定重疊，但我認爲只需要應用於媒體查詢，我可以問什麼是在媒體查詢中使用它的正確方法。 – Master

如果你想在移動/桌面上分離網站的外觀，那麼你會這樣做：@media（min-width：960px）{.selector {some：css; }}這將定義桌面樣式和常規stype（您在媒體查詢之前定義的樣式）將確定移動網站。這種方法被稱爲移動優先。 960像素的值取決於您以確定何時需要中斷髮生。我建議你在MDN上查找「媒體查詢」，他們詳細解釋了它。 – dsasko

正確創建文章部分

回答

相關問題