html - 使用位置 : relative inside a flex container

Question

我正在预览帖子，例如它的文本和图像作为带有一些过滤器的背景。

问题是我想让整个 div 不是 1300px，而是只有 650px。

但是，这样我将无法使用 display: flex 并且不会让带有 img 的 div 与带有文本的 div 具有相同的高度。

有没有可能只用css(不用js)解决这个问题的方法？

这是代码:http://codepen.io/anon/pen/RGwOgN?editors=1111

.post {
  width: 650px;
  padding: 25px 25px;
  z-index: 10;
  position: relative;
  color: white;
}
.flex-row {
  display: flex;
  width: 1300px; /* here is a problem */
}
.back-img {
  width: 650px;
  background-size: cover;
  position: relative;
  z-index: 0;
  left: -650px;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  overflow: hidden;
}

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum</h1>
    <h2>text here</h2>
    <p class="lead">text hete</p>
  </div>
  <div class="back-img" style="background-image: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)">
    <div></div>
  </div>
</div>

如您所见，它工作正常，但前提是父元素 (flex-row) 设置为 size*2，因为另一种方式会自动减小子元素的大小。

Answer 1

相对定位使元素保持正常流动。这意味着在你定位它们之后，它们原来的位置仍然占据着空间。

绝对定位从正常流中移除元素。这些元素不占用空间，因此可以在不影响周围布局的情况下对齐它们。

这应该适合你:

.flex-row {
  display: flex;
  width: 650px;                       /* 1 */
  position: relative;                 /* 2 */
}
.post {
  width: 100%;
  padding: 25px 25px;
  z-index: 10;
  color: white;
}
.back-img {
  position: absolute;                 /* 3 */
  height: 100%;
  width: 100%;
  background-size: cover;
  z-index: 0;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  overflow: hidden;
}

<div class="flex-row">
  <div class="post">
    <h1>Lorem ipsum dolor</h1>
    <h2>Lorem ipsum dolor sit amet, cu melius feugiat delenit mei. Sea cu tale etiam definitiones. An pro scribentur omittantur, ei sea utinam hendrerit. Has ad dico illud fierent. Vis tale modus ridens te.

Vix viris zril forensibus eu, dolor expetendis dissentiunt duo in. Vis id ludus theophrastus. Debitis tibique necessitatibus quo ea. At movet bonorum intellegat eos. Nec ne ubique erroribus. Rebum accusata est ad.</h2>
    <p class="lead">{{post.summary}}</p>
  </div>
  <div class="back-img" style="background-image: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),url(http://unsplash.com/photos/g-AklIvI1aI/download)">
    <div></div>
  </div>
</div>

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

注意事项:

1. 主容器宽度从 1300 像素更改为 650 像素
2. make primary container the bounding box (nearest positioned ancestor) for absolute positioning of children
3. 图片被流出并占据了父div的全部宽度和高度