<figure>＆<figcaption>浮動圖像，figcaption包裹和文章文字環繞圖像/標題

Question

搜索了幾周的網頁，但找不到滿足我所有需求（僅部分）的答案，非常歡迎幫助。

我想要什麼，並已完成：

• 平原兼容HTML5和CSS
• 顯示文章內的圖像
• 圖像必須在圖片下面的說明
• 標題必須
• 字幕必須限制爲圖像的水平尺寸
• 字幕可能比一行更長，文本應換行到下一行（靜止內的圖像的尺寸）
• 圖像和字幕必須漂浮作爲一組，以左或右（想到用<figure class="left">的）製品的
• 文本必須圖像和字幕繞到
• 圖像尺寸而異（第一圖像是例如200像素，在文本第二圖象別的地方是320像素等）

現在我想補充這些要求：

• 我不喜歡添加圖像的原始寬度一樣<figure class="left" style="width:200px">但只如果沒有其他辦法。
• 響應設計：當圖像寬度將佔據顯示寬度的超過50％時，必須限制顯示寬度的50％。
• 當顯示寬度是320像素或以下時，圖像不能浮動，但必須塊級元素，因此在圖像周圍物品的無文字環繞。

如果我離開：

HTML5

<p>This is a part of the text of the article and at this point a image is inserted at the left side 
<figure class="left" style="width:250px"> 
<img src="image.png" alt="img txt"> 
<figcaption>image caption and a lot of text</figcaption> 
</figure> 
and the article text goes on and on so that it will wrap around the image</p> 

CSS

figure {display:inline} 
figcaption {display:block} 
figure.left {float:left} 
figure.right {float:right} 

（我離開了填充/利潤率，這樣使它看起來更好。）

Answer 1

試試這個CSS，看看你什麼時候調整瀏覽器大小，文字wr ap在圖像上。

.left { 
float: left; 
border: 5px solid #BDBDBD; 
background: #E0E0E0; 
padding: 5px; 
margin:0px; 
} 
figcaption{ 
text-align:center; 
} 

Answer 2

也許這感覺太HTML3給你，但我發現這個答案：

http://www.sitepoint.com/forums/showthread.php?1049396-How-to-force-this-figcaption-element-to-respect-its-parent-s-width-boundaries

figure { 
    display: table; 
} 
figcaption { 
    display: table-caption; 
    caption-side: bottom; 
} 

我不認爲這是由HTML5或CSS3禁止，這當然似乎爲我工作。

撇開響應式設計的要求 - 我覺得這是對我沒有一個良好的CSS只回答一個單獨的問題。

Answer 3

這可能會幫助別人解決它。我還在尋找一種方法來顯示與圖像高度相同的圖像右側的標題。

figure, .figure { 
 
    
 
    display: inline-table; 
 
} 
 

 
figcaption { 
 
    display: table-caption; 
 
    caption-side: bottom; 
 
     background-color: red; 
 
    
 
} 
 
     
 
img { 
 
    width: 100%; 
 
} 
 
     
 
.image { 
 
    width: auto; 
 
} 
 
     
 
    figure div { 
 
      display: inline-table; 
 
      background-color: aqua; 
 
    } 
 
     
 
.caption { 
 
    display: table-caption; 
 
    caption-side: top; 
 
     background-color: red; 
 
    margin: 0; 
 
}

<figure> 
 
    <h2 class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </h2> 
 
    
 
     <img src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
 
     <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption> 
 
</figure> 
 

 
<figure> 
 
    <figcaption>caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </figcaption> 
 
    
 
     <img src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
 
     
 
</figure> 
 

 
<figure> 
 
    <div class="caption">caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption caption </div> 
 
    
 
     <div><img class="image" src="http://mintnet.net/images/thumbs/small-mossy.jpg"> 
 
      </div> 
 
     
 
</figure>