html - 在动态文章文本中 float 一个 Div

Question

我有一个基于参数查询的动态页面:

site.com/news/?article=3334 (One Article)
site.com/news/?article=3335 (Another Article)

根据文章 ID，页面会动态填充适当的文章文本。

对于每篇文章，应该有一个带有次要图像的 div 向下推 7 到 10 行并向右浮动，文字环绕在它周围。

Dynamic Div Float

p {
  margin: 0;
  padding: 0;
}

#article_frame {
  background-color: yellow;
  width: 100%;
  position: relative;
}

.article_title {
  font-size: 3.5em;
  padding-bottom: 10px;
  border-bottom: solid 1px gray;
  margin-bottom: 10px;
}

.article_content {
  font-size: 1.45em;
  line-height: 1.65em;
}

#article_gallery {
  background-color: red;
  width: 250px;
  float: right;
}

.article_badge {
  width: 250px;
  height: 250px;
}

.article_badge_descript {
  font-size: .8em;
}

<div id="article_frame">
  <p class="article_title">Title Goes Here</p>
  <div class="article_content">
    <div id="article_gallery">
      <img class="article_badge" src="">
      <p class="article_badge_descript">Gallery Description Here.</p>
    </div>
    Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here.
    Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. <br><br> Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article
    text goes here. Testing article text goes here. <br><br> Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. <br><br> Testing article text
    goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here. Testing article
    text goes here. Testing article text goes here. Testing article text goes here. Testing article text goes here.
  </div>
</div>

图片库 div 位于顶部，但我想将其向下推 7 到 10 行，同时仍允许文本环绕 div 本身。

Answer 1

为什么不在 article_gallery 上方创建一个 div 并包含任何您希望在那里全长显示的文本？

<div class="article_content">
  <div>
    Top text goes here.
  </div>
  <div id="article_gallery">
  ...
</div>

参见示例 here