Question

这是我的第一次网站尝试，我一直在尝试以某种方式做自己的事情，并遵循一个很棒的教程。我学到了很多，但遇到了一个问题。

侧面的'Post Tiles'目前有一个保证金顶部来定位它们。这很有效，直到延伸到第二行的最后一篇文章。那么我该怎么做才能使<div class="tile">总是比帖子标题低15px。

另一方面，如果有人能解释如何在小小的讲话泡泡中完全集中我的“评论数字”，因为目前它对某些数字看起来不错。

如果我偏离了教程，我的代码看起来很难受到训练有素的眼睛，请提前表示感谢和道歉。

Answer 1

目前<div class="tile">位于<div class="articleBody">之外。将瓷砖放在文章正文中，位于h1标记下方。删除瓷砖上的上边距。将tile和img链接到另一个div中的单个帖子。将图块向左浮动，将单个图像右侧浮动。

建议结构：

<div class="articleBody">
    <h1>Post Title</h1>
    <div class="below-title-wrap">
         <div class="tile">...</div>
         <a href="blog-single.html">
              <img src="http://lorempixum.com/495/125/technics" alt="Tech">
         </a>
    </div>
</div>

让我添加一个编辑，出于SEO的原因，不建议每页有多个<h1>标记。我只在<h2>分别在单个帖子页面上创建<h1>和single.php。

Answer 2

<强> CSS：

* { margin:0; padding:0 }
h2 { padding-left:115px; margin-bottom:15px }
.tile { width:100px; height:100px; float:left; margin:0 15px 15px 0 }

<强> HTML：

<div class="article">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p><img class="tile" src="tile.gif" alt="" /></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>

将<div>定位在帖子标题</div>下面

2 个答案: