我适用于元素的样式不适用于嵌套在内部的元素？

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

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

这必须主要用CSS完成。只有组织的HTML标签可以使用，并且不能导入包或代码。

问题：

每个审查假定由垂直距离20pt进行分离。这不是出于任何原因。

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

这可能与填充仅适用于text的事实有关，因为它需要将其作为whole应用于审阅。

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

我想知道这是否与img元素是内联元素而不是块元素有关？你对此有任何建议都会大受欢迎。

代码：

CSS

难道这不是本质上的这个副本 - http://stackoverflow.com/questions/34940238/padding-not-being -applied-to-element-inside-container-element –

，因为你必须适用于他们

float: left

的填充不与您的图像工作。如果你把这个属性拿出来，这个填充将会考虑到img。

在旁注：也许你应该重新考虑你的html结构。从逻辑上说，评论文本和评论者属于一个整体，所以他们应该被一些父div元素所包围。试想一下，在真正的烂番茄网站，他们如何构建自己的评论，并让这种“启发”你;-)

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

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

结构良好的HTML确实有帮助造型。 HTML和CSS是齐头并进的，所以如果你的HTML很杂乱，你的CSS会变得混乱和“黑客”。所以首先确保你的HTML首先合理（分组，嵌套等）。

2016-01-22 10:13:59

谢谢！这个答案最终帮助了我。 – user3450277

很高兴我能帮忙;-) –

在你的CSS添加这类

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

2016-01-22 10:14:14

嗯..你在CSS填充只指的类“评论者信息”。具有类'reviewer-text'的元素将其填充设置为8px;

如果您想要像图片那样获得该块的结果，请为'reviewer-text'应用底部填充。变化：

.reviewer-text { 
    padding: 8px; 
}

到：

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

2016-01-22 10:16:00 Shlizer

回答