Question

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

site.com/news/?article=3334（一篇文章）
site.com/news/?article=3335（另一篇文章）

根据文章ID，页面会使用相应的文章文本进行动态填充。

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

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>

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

Answer 1

为什么不在div上方创建article_gallery，并在其中包含要显示的完整文本？

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

请参见示例here

浮动动态文章文本的Div

1 个答案: