Question

我很难找到如何表达这个问题，因此也寻找任何答案。

我正在建立一个用户可以发帖的网站。这些帖子是在文章中生成的。我希望用户能够发布多个图像大小。所以一篇文章可能比另一篇文章更高。

我将在我为此问题创建的示例中展示它，而不是全部解释。你可以在代码片段中看到它。

我建议您全屏查看该代码段

html,
body {
  margin: 0;
  padding: 0;
}
#main {
  width: 450px;
  margin: 0 auto;
}
article {
  width: 46%;
  margin: 2%;
  float: left;
  background: #ddd;
}
img {
  width: 100%;
}
section {
  width: 96%;
  margin: 2%;
}

<div id="main" role="main">
  <article>
    <img src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" alt="this is an image" />
    <section>
      <h1>I am left</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Atqui reperies, inquit, in hoc quidem pertinacem; Non dolere, inquam, istud
        quam vim habeat postea videro;</p>
    </section>
  </article>
  <article>
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="this is an image" />
    <section>
      <h1>I am right</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Atqui reperies, inquit, in hoc quidem pertinacem; Non dolere, inquam, istud
        quam vim habeat postea videro;</p>
    </section>
  </article>
  <article>
    <img src="#" alt="this is an image" />
    <section>
      <h1>I am bottom left</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Atqui reperies, inquit, in hoc quidem pertinacem; Non dolere, inquam, istud
        quam vim habeat postea videro;</p>
    </section>
  </article>
  <article>
    <img src="#" alt="this is an image" />
    <section>
      <h1>I am bottom right</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prioris generis est docilitas, memoria; Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Atqui reperies, inquit, in hoc quidem pertinacem; Non dolere, inquam, istud
        quam vim habeat postea videro;</p>
    </section>
  </article>
</div>

正如你在上面的例子中看到的那样，正确的文章有一个更高的图像，所以文章变得更高，因此右下方的文章向下移动，但左下方的文章向下移动。

我如何才能坚持上述文章？这应该是相当简单的修复，但我无法解决它...无论是不同的立场还是明确的。有什么帮助吗？

Answer 1

您可以尝试将其设为滚动条，以便不会破坏最大高度。

    section { overflow-y: auto; height:2%;}

您还可以先尝试隐藏内容，然后在用户点击后显示其余内容。可以使用javascript轻松完成。

此外，您可以调整图片大小以使其为max-height。因此图像不会从该部分带走空间。

当有空间时，如何让元素不向下移动？

1 个答案: