Question

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

我发布到azure以获得更好的视图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>

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

在像你这样的元素之间添加空格时我通常会做的事情是将 margin-top 添加到所有元素（在你的案例文章中），并从：first-child中删除边距即可。

正确创建文章部分

1 个答案: