Question

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

问题是我希望整个div不是1300px，而只是650px。

然而，这样我就无法使用display: flex并且不会使用与文本div相同的高度来设置div。

有没有办法只用css（没有js）来解决这个问题？

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

＆＃13;

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

＆＃13;

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

＆＃13;

因此，当您看到它工作正常时，但仅当父元素（flex-row）设置为大小* 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

注意：

主容器宽度从1300px更改为650px
make primary container the bounding box (nearest positioned ancestor) for absolute positioning of children
图像被取出并占据父div的全宽和高度

在flex容器中使用position：relative

1 个答案: