最近,而與數字標籤做一些測試時,我發現有些奇怪。雖然我可以輕鬆地將一個圖像標記浮動到段落內,並將段落的背景顏色保留在段落和圖像本身之下。我無法用包含我的圖像的浮動數字標籤得到類似的結果。在img標籤上浮動是不是當應用於數字標籤
而是說話的,這裏兩個環節,以確保你明白我的問題:
簡單的圖像沿段漂浮的正常工作: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;
}