css - 容器 DIV 不垂直包装

Question

我意识到可能已经有数以千计的问题与此相关，但我浏览了其中的许多问题并没有提出令人满意的解决方案。如果有人能对我应该做什么提供一些见解，我将不胜感激。URL 是http://www.ouranthology.com（索引页）
如您所见，内容完全流过白色背景。我尝试将 float:right 和 clear:both 添加到相应的部分，但无济于事。所以现在编码又回到了它开始的地方，大量的 < P > 标签创建了空白。

谢谢！

Answer 1

这是风格造成的

.post {
  position: absolute;
  top: 590px;
  font-family: Georgia, "Times New Roman", Serif;
}

绝对定位将块从流中取出，因此它的父级不会将其视为子级进行渲染。将其更改为 position:relative 将解决您问题中的问题。

更进一步，尽量不要使用像素定位（top:590px;），你应该能够通过使用正常的流定位来获得你想要的外观。这使您的布局对更改更具弹性。

而且你的结构看起来很奇怪。我懂了

<div class="container">
  <div class="content">
    <div class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>

      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>

      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>

我会预料到的

<div class="container">
  <div class="content">
    <div class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </div>

    <div class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </div>

    <div class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </div>

甚至

<div class="container">
  <div class="content">
    <article class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </article>

    <article class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </article>

    <article class="post">
      <div class="post-title"></div>
      <div class="post-author"></div>
      <div class="post-excerp"></div>
    </article>

Answer 2

如果您希望根据帖子的白色背景更长然后在课堂上
尝试 。Position:Relativepost