<figure> & <figcaption> 떠 다니는 이미지, 그림 캡션 및 기사 텍스트가 이미지/캡션 주위를 둘러 쌉니다.

Question

몇 주 동안 웹을 검색했지만 모든 필요 사항 (부분적으로 만)을 만족하는 답변을 찾을 수 없으며, 도움을 매우 환영합니다. 내가 원하는 달성 한 무엇

:

• 는
• 이미지가 이미지 아래
• 캡션해야 자막이 있어야합니다 기사 내에서 이미지를 표시 준수 및 CSS를 일반 HTML5
• 캡션은 이미지의 수평 크기로 제한되어야합니다.
• 캡션은 한 줄보다 길 수 있으며 텍스트는 다음 줄로 줄 바꿈되어야합니다. (정지 영상의 크기 내에서)
• 이미지와 캡션을 왼쪽 또는 오른쪽으로 그룹으로 떠 있어야 이미지와 캡션 주위에 포장해야한다 문서의
• 텍스트 (<figure class="left">를 사용하여 생각)
• 이미지 크기는 (첫 번째 이미지를 변화 예 : 200 픽셀, 텍스트의 다른 곳에서 두번째 이미지는 320 ~ 등)

입니다 그리고 지금은 이러한 요구 사항을 추가 할 :

• 내가 <figure class="left" style="width:200px">하지만 같은 이미지의 원래 너비를 추가하지 않습니다를 다른 방법이 없다면.
• 반응 형 디자인 : 이미지 너비가 디스플레이 너비의 50 % 이상 차지하는 경우 디스플레이 너비의 50 %로 제한해야합니다.
• 디스플레이 너비가 320px 이하인 경우 이미지는 부유하지 않아야하며 블록 레벨 요소 여야하므로 이미지 주위에 글자가 줄 바꿈되지 않습니다. 나는 왼쪽

:

HTML5는

는 CSS

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

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

Answer 1

(. 나는 패딩/마진을 더 나은 보이게하는 등의 탈락)

이 CSS를 시도하고 브라우저의 크기를 조정하면 텍스트를 볼 수 있습니다. 이미지에 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>