html - 正确创建文章部分

Question

我正在创建一个文章栏，每篇文章都有一个部分。我想知道我如何响应地在部分之间添加空间，目前如果该部分的文本很长，它可以与我的 hr 标签重叠并转到我的下一个部分。如果我在移动设备上查看此问题，则只能看到此问题。

http://codepen.io/anon/pen/MyWoPX

我发布到 Azure 以获得更好的 View http://testingwebground.azurewebsites.net/如果我尽可能地缩小宽度，它会显示下图

http://snag.gy/17mpD.jpg

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

Answer 1

问题出在#Article_Header2 上的高度定义

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

如果你想保留 48px 的最小高度，那么可以使用 min-height 代替。像这样:

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

在像您这样的元素之间添加空格时，我通常做的事情是将 ma​​rgin-top 添加到所有元素(在您的文章中)，并从 :first-child 中删除边距 。