Question

条件

我实际上是在尝试复制此assignment的网页输出。网页中使用的图片为here。这基本上是我所有这一切的最终目标，让这个网页尽可能接近Desired Output。不仅相似，而且尽可能接近相同。

这需要以不仅表面反映预期输出的方式进行，而是以“正确”的方式完成。例如，我可以很好地调整填充和边距大小，直到它看起来像它需要的方式，但这不会解决总体问题，并使代码样式很糟糕。

这主要是用CSS完成的。只能使用组织HTML标记，不能导入任何包或代码。

问题：

每次评论应该以20pt的垂直距离分开。无论出于何种原因，这都无法解决。

这可能与我的一些评论看起来像this的事实有关，当我需要它们看起来像this时。

这可能与填充仅在text应用于whole时需要应用于审核的事实有关。

您可以在第一张图片中看到代表填充的蓝色条仅位于文本下方，而不在图像和文本下方。

我想知道这是否与img元素是内联元素而不是块元素有关？你对此提出的任何建议都会非常适用。

代码：

CSS

Answer 1

填充不适用于您的图片，因为您有

float: left

适用于他们。如果您取出该属性，填充将考虑img。

旁注：也许你应该重新考虑你的html结构。逻辑上，评论文本和评论者属于一起，因此它们应该被一些父div元素包围。只要看看真正腐烂的西红柿网站，以及他们如何构建他们的评论，让它“激励”你; - ）

但基本上它应该是这样的：

<div class="review">
  <div class="review_quote"></div>
  <div class="review_source"></div>
</div>

结构良好的HTML确实有助于样式化。 HTML和CSS齐头并进，所以如果你的HTML很乱，你的CSS也会变得混乱和“hacky”。因此，首先要确保您的HTML有意义（分组，嵌套等）。

Answer 2

在你的css中添加这个类

.reviewer-text::after {
    clear: both;
    content: "";
    display: block;
}

Answer 3

嗯..你在css中的填充只是指'class reviewer-info'。带有'reviewer-text'类的元素将其填充设置为8px;

如果您希望获得该块的结果，请在图片上为“reviewer-text”应用底部填充。变化：

.reviewer-text {
   padding: 8px;
}

为：

.reviewer-text {
   padding: 8px 8px 20px 8px;
}