Span 无法识别父元素 - 重叠

Question

首先，感谢您抽出宝贵时间回答我可能很愚蠢的问题。我的跨度有问题，不想呆在妈妈让他呆的地方。

HTML

<section class="row" id="white_background">
   <div class='col-lg-6 col-md-6 col-sm-6 col-xs-12'>
                <article class="news_post">
                    <span class='news_head'>
                        <h4>BLA BLA BLA BLA BLA BLA BLA</h4>
                        <p><?php echo $NewsItem->getValueEncoded( "summary" ) ?></p>
                        <p><?php echo $NewsItem->getValueEncoded( "uploadDate" ) ?></p>
                    </span>
                </article>
        </div>
    </section>

萨斯

#white_background {
background: $light;
height:100%;
padding: 20px;
text-align: center;
@inlcude clearfix;
h2 {
    text-align: center;
    color: $purple;
   }
}

.news_post {
@include article_back (
    '../img/picture_2.png');
padding: 20px;
margin-top: 30px;
margin-bottom: 50px;
}

.news_head {
max-width:  330px;
background-color:   $purple;
padding: 6px 12px;
display: block;
color: $white;
margin: auto  50px auto 0px;
transform: translateY(120px);
text-align: left;
font-size: 12px;

    h4 {
        font-family: $heading;
        font-size:13px;
        }

}

现在它这样做了： http://imgur.com/a/HQ46N

所以看起来跨度似乎没有将 div 视为边界.. 有什么想法吗？^^

编辑：抱歉在这里弄得有点乱。 我想要实现的是使文章跨度以受控方式溢出文章。含义：如果我手动调整窗口大小，span应该不超出父文章.

问题是我使用的部分没有正确渲染跨度的移动，这就是部分重叠的原因，如下所示：http://imgur.com/a/fZyux（注意：紫色框中的左侧项目溢出了浅灰色文章的边缘。它应该留在这个灰色框内。

现在的问题是，当我将窗口大小调整为更小的窗口大小时，跨度开始向下移动，但我预计它会移动到它的部分文章或 div 的边缘。 跨度无法识别它位于 div 中并且不受其边界的限制。为什么会这样？这很难解释，但我试过了。 看看完整的模型以获得一个想法。 http://imgur.com/a/5ZQn9

我希望这能让我更清楚我想要实现的目标^^

Answer 1

使用display flex;。

article {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}
article span {
  width: 30px;
  height: 30px;
  border: 1px solid green;
}

<article>
  <span></span>
</article>

Answer 2

部分重叠，因为使用：

transform: translateY(120px);

使元素表现得像以前一样：

position: relative;
top: 120px;

元素已在屏幕上移动，但布局的其余部分呈现就好像它仍在原来的位置一样。要推动边界，您可以将margin-bottom 添加到您的span。

.container {
  background-color: yellow;
  height: auto;
}
.element-transformed {
  display: block;
  width: 50%;
  height: 100px;
  background-color: red;
  transform: translateY(70px);
}
.element-positioned {
  display: block;
  width: 50%;
  height: 100px;
  background-color: red;
  position: relative;
  top: 70px;
}
.make-some-space {
  height: 100px;
}
.element-transformed-with-margin {
  display: block;
  width: 50%;
  height: 100px;
  background-color: red;
  transform: translateY(70px);
  margin-bottom: 70px;
}

<div class="container">
  <span class="element-transformed">
    <p>transform: translateY(70px);</p>
  </span>
</div>
<div class="container">
  <span class="element-positioned">
    <p>position: relative; top: 70px;</p>
  </span>
</div>
<div class="make-some-space"></div>
<div class="container">
  <span class="element-transformed-with-margin">
    <p>transform: translateY(70px); margin-bottom: 70px;</p>
  </span>
</div>
<div class="container">
  <span class="element-positioned">
    <p>position: relative; top: 70px;</p>
  </span>
</div>