5

在网上搜索了数周，但找不到满足我所有需求的答案（仅部分），非常欢迎帮助。

我想要并且已经完成的：

  • 纯 HTML5 兼容和 CSS
  • 在文章中显示图像
  • 图片必须有标题
  • 标题必须在图片下方
  • 标题必须限制为图像的水平尺寸
  • 标题可能超过一行，文本应换行到下一行（仍在图像大小范围内）
  • 图片和标题必须作为一个组向左或向右浮动（考虑使用<figure class="left">）
  • 文章的文字必须环绕图片和标题
  • 图片大小不同（第一张图片是 200 像素，第二张图片是 320 像素等）

现在我想添加这些要求：

  • 我不喜欢添加图像的原始宽度，<figure class="left" style="width:200px">但前提是没有其他方法。
  • 响应式设计：当图像宽度将占据显示宽度的 50% 以上时，必须限制在显示宽度的 50% 以内。
  • 当显示宽度为 320px 或以下时，图片不能浮动，必须是块级元素，所以图片周围没有文字环绕。

我离开的地方：

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>

（我省略了填充/边距等以使其看起来更好。）

4

3 回答 3

2

尝试以下 css 并查看当您调整浏览器大小时，文本会在图像上换行：

.left {
  float: left;
  border: 5px solid #BDBDBD;
  background: #E0E0E0;
  padding: 5px;
  margin: 0px;
}

figcaption {
  text-align: center;
}
于 2013-09-22T06:16:24.113 回答
1

也许这对你来说感觉太 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 答案。

于 2014-02-03T17:16:30.890 回答
0

这可能会帮助某人解决它。我也在寻找一种在图像右侧显示与图像高度相同的标题的方法。

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>

于 2016-07-07T23:57:05.983 回答