Question

最近在使用数字标签进行一些测试时，我发现了一些奇怪的东西。虽然我可以轻松地在段落中浮动图像标记，并保持段落的背景颜色和图像本身。我不能用包含我的图像的浮动数字标签获得类似的结果。

这里有两个链接，以确保您了解我遇到的问题，而不是说话。

简单的图片沿着段落浮动，工作正常： here

相同但图片标记包含图片代码但未按预期工作： here

如何在使用数字标签时获得相同的结果？

这是代码，但检查codepen，问题显而易见。

HTML结构（

<div class="wrapper">

    <p class="clearfix">

   <img class="fox" src="http://raptorimages.hu/wp-content/gallery/blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
<!-- the figure tag is supposed to work such as the image tag above when uncommented -->
  <!--<figure class="fox"> 
   <img src="http://raptorimages.hu/wp-content/gallery  /blog/fox_img_9734_w500_kovacsa.jpg" alt="fox" >
  <figcaption>Running fox</figcaption>
  </figure>-->

  </p>

  <p>Praesent non risus enim. Duis ac mi tempus, feugiat nunc non, vestibulum magna. Curabitur in tempor lorem. Mauris fermentum vulputate </p>

</div>

CSS

*{
  box-sizing:border-box;
}
.wrapper{
  width:90%;
  background:#cecece;
  margin: 0 auto;
  padding: 1.1111111%;
}

.wrapper p{

  background-color:grey;
  padding:1.111111%;

}

.fox{
  float:right;
  padding:0 0 0 1.1111%;
}

img,video,object,embed{
  max-width:100%;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 1

根据W3组织，这是网络的标准。 P只能有Phrasing elements。

img是一个措辞元素，因此<img class='fox' />是有效的html，您的浏览器会按预期处理它。

figure不是一个措辞元素，因此<figure class='fox'></figure>无效html，您的浏览器会通过将其更改为<figure class="fox"></figure>来相应地对其进行纠正。所以你得到不同的输出。

P.S：这是因为您的浏览器如何呈现html

当在图标签上应用时，浮动img标签是可以的

1 个答案: