造型<img>在<figure>

我似乎无法风格的形象是一个数字中：造型<img>在<figure>

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

来源

2014-03-07 Juicy

听BoltClock。此外，关闭该img标签大声哭泣。 ;） – Frankenscarf

@Frankenscarf：除非OP试图遵守XML语法规则，否则不需要关闭它。除了任性的p元素外，这似乎是一个有效的HTML片段。 – BoltClock

您是正确的先生。我一直忘记，今天所做的一切都是为了不再存在文档类型的未来而做出的。我是喝我的保证，现在在我疼痛的关节上擦一些Bengay。 – Frankenscarf

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; 
}

来源

2014-03-07 02:32:47 BoltClock

只是一个小变化

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

Working Fiddle

来源

2014-03-07 02:33:55 Jatin

造型<img>在<figure>

回答

相关问题