<figure> 中的 <img> 样式答案

【问题标题】：Styling <img> in <figure><figure> 中的 <img> 样式
【发布时间】：2014-04-10 00:28:08
【问题描述】：

我似乎无法为图中的图像设置样式：

HTML：

<article>
    <p>

    <figure class="float-right">
        <img src="images/castle1.jpg">
        <figcaption>The castle by day</figcaption>
    </figure> 

    </p>
</article>

CSS：

article p figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}

您可以查看网站 here

【问题讨论】：

收听 BoltClock。另外，关闭那个 img 标签以便大声哭泣。 ;)
@Frankenscarf：除非 OP 试图遵守 XML 语法规则，否则不需要关闭它。除了任性的 p 元素，这似乎是一个有效的 HTML 片段。
您说得对，先生。我一直忘记今天所做的一切都是为不再存在文档类型的未来而制作的。我现在要喝我的 Ensure 并在我疼痛的关节上擦一些 Bengay。

标签： html css

【解决方案1】：

p 不能包含figure。 p 元素中唯一允许的内容是 phrasing content，figure 不会归类为。

实际发生的情况是，您的figure 元素被创建为p 元素之后的兄弟元素，并默默地关闭您的开始<p> 标记（使结束标记挂起...sort of）。由于您的选择器在 figure 中查找 img 本身在 p 中，但实际的 DOM 没有反映这一点，所以它不起作用。

如果您没有将 p 元素用于其他任何用途，则应将其删除，并且您的选择器更改为：

article figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}

【讨论】：

【解决方案2】：

只是一个小小的改变

.float-right img {
  height: 330px;
  width: 500px;
  float: right;
  margin: 10px 20px 20px 20px;
  background-color: green;
  border-radius: 4px;
}

Working Fiddle

【讨论】：