Question

如果你看一下我的网站，我在网站上有一个奇怪的问题：NerdyFuture。一切都可能看起来很正常，但有时当页面加载最新消息框中的文本时，定位非常奇怪。当我从我的桌面预览我的网站（Notepadd ++）时，最后的新闻文本显示为我应该。有谁知道问题可能是什么？

说明它的样子：Picture

Answer 1

我不建议将文字设为position: absolute。从标题和段落中删除它，并将float: left添加到图像中，使它们浮动在文本旁边。现在，您需要为article元素添加一个clearfix，以便浮动被清除并重置为下一个article元素。您可以阅读有关clearfix hack here的更多信息。我也不建议将标题设置为display: inline。请改用margin: 0。添加margin-right以获取图像和文本之间的额外空间。

HTML

<div id="article1" class="Latest_Posts clearfix">
  <img src="lgg.png">
  <h3>...</h3>
  <p>...</p>
</div>

CSS

.Latest_Posts p {
  position: absolute; /*remove this*/
  margin-x: x; /*remove this*/
  ...
}

.Latest_Posts h3 {
  position: absolute; /*remove this*/
  margin-x: x; /*remove this*/
  margin: 0;
  ...
}

.Latest_Posts img {
  float: left;
  margin-right: 15px;
}

.clearfix::after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}

网页并不总是正确定位？

1 个答案: