Question

我目前正在编写标记，其中包含任意一方的内容以及floats left或right朝向top的图像 - 这是有效的细

但是，当您在左侧或右侧引入太多内容时，内容框不希望向下移动，而是向上移动然后向下移动以覆盖间隙。但我想要这个差距。

以下示例：如果您无法在下方重现;请尝试：https://jsfiddle.net/171f14cg/

article {
    min-height: 450px;
    position: relative;
    margin-bottom: 120px;
}
article.art-white-bg {
    color: black;
}
article.art-white-bg .content-area-push {
    background-color: white;
    box-shadow: 0px 18px 26px -5px rgba(0, 0, 0, 0.74);
}
article .content-area-push {
    position: absolute;
    min-height: 350px;
    bottom: 0;
}
article.right-image figure {
    right: 0;
}
article figure {
    position: absolute;
    max-height: 360px;
    z-index: 1;
}
article.right-image .art-content {
    float: left;
    width: 30%;
}
article .art-content {
    padding: 50px 45px;
}

<article class="main-article right-image art-white-bg animated hidden visible fadeInUp">
  <div class="content-area-push">
    <div class="art-content">
      <header>
        <h2>Working example cause of low amount of content</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
      
    </div>
  </div>
  <figure>
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&amp;txt=550%C3%97350&amp;w=580&amp;h=360" alt="Baby Orang Utan hanging from a rope">
  </figure>
</article>


<article class="main-article right-image art-white-bg animated hidden visible fadeInUp">
  <div class="content-area-push">
    <div class="art-content">
      <header>
        <h2>Example that does not work</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem laborum, autem voluptates ipsam voluptate porro, quibusdam vero. Error, quod, voluptates. Ducimus nulla eum quos sequi, maxime vitae ut autem numquam?</p>

    </div>
  </div>
  <figure>
    <img src="https://placeholdit.imgix.net/~text?txtsize=52&amp;txt=550%C3%97350&amp;w=580&amp;h=360" alt="Baby Orang Utan hanging from a rope">
  </figure>
</article>

Answer 1

我认为你正在寻找类似的东西：

https://jsfiddle.net/dee0gjaz/

我从几个元素中删除了许多属性。基本上，你过度造型了一点。您的文字内容不需要absolute定位。这应该是静态的，以便它可以拉伸父。

但是，图片可以保持absolute，并且使用负top尺寸，您将获得一致的偏移量。

内容块被推到了底部

1 个答案: