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视为边界..任何想法？^^

编辑：很抱歉这里有点麻烦。我想要实现的是使文章跨度以受控方式溢出文章。含义：如果我手动调整窗口大小，范围应不超出父文章

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

现在的交易破坏者是，当我将窗口调整为较小的窗口大小时，跨度开始向下移动，但我预计它将移动到它的parten文章或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>

Span无法识别父元素 - 重叠

2 个答案: