如何将figcaption定位在图片下方答案

【问题标题】：How to position figcaption under the image如何将figcaption定位在图片下方
【发布时间】：2017-03-27 07:53:27
【问题描述】：

我正在尝试将我的 figcaption 放在 img 下。不知道为什么会向右。我在页面上有其他图片，他们的 figcaption 没有向右，它在图片下方，但在这张图片上它不在并且应该在下方。有人可以帮帮我吗？

这是我的 HTML 代码部分：

 figure{
        margin: 0;
    }

    #fig_moje_slike{
        font-size: 9px;
        text-align: left;
        width: 50%;
        margin: 0;
    }

    #sadrzaj{
        display: inline-block;
        margin: 3em auto;
    }

    #sadrzaj ul{
        display: block;
        float: left;
    }

    #sadrzaj ul li{
        margin: 15px 0;
    }

    #slika_mene{
        width: 14%;
        height: auto;
        display: block;
        float: left;
    }

<section id="sadrzaj">
            <aside>
                <figure>
                    <img src="slike/ja.jpeg" alt="slika mene" id="slika_mene">
                    <figcaption id="fig_moje_slike">Moja slika</figcaption> 
                </figure>
            </aside>
            <ul>
                <li>bla bla</li>
                <li>bla bla</li>
                <li>bla bal</li>
                <li>blabla</li>
            </ul>
        </section>

结果图片： http://imgur.com/a/XXgsP

【问题讨论】：

我已经在下面回答了。看来你的问题还不够清楚。请记住尽可能清楚地提出问题。你想要的结果如何，有什么问题，一切都应该尽可能地提及。但是，请检查我提供的答案，希望对您有用
@Lucian，我认为，通过阅读下面的一些 cmets，他需要左侧的 aside 元素和右侧的 ul 元素，但他同时浮动 #slika_mene 和ul 向左。有一个简单的解决方案，display: flex 以及浮动解决了他的问题。不幸的是，他没有清楚地说明他想要的结果。
@Mers 是的，没错。我也发现读了他的几篇 cmets 所以我相应地回答了
是的，抱歉，有点不清楚的问题，我忘了提到我需要一个结果，正如 Mers 所说。我将@Lucian 解决方案标记为最佳解决方案，因为它需要对 HTML 和 CSS 进行最少的更改。感谢所有愿意提供帮助的人。

标签： html css image css-position figure

【解决方案1】：

从img 和figcaption 标记中删除float: left。而是将float 用于aside 并根据width，在aside 上使用它

https://jsfiddle.net/Ls6coLb7/3/ 这是更新后的小提琴

【讨论】：

请检查更新的小提琴。我已经评论了更改

【解决方案2】：

#slika_mene 放一个float:left。这是一个错误。给float:left 给figure。

figure {
  margin: 0;
  float: left;
}

#fig_moje_slike {
  font-size: 9px;
  text-align: left;
  width: 50%;
  margin: 0;
}

#sadrzaj {
  display: inline-block;
  margin: 3em auto;
}

#sadrzaj ul {
  display: block;
  float: left;
}

#sadrzaj ul li {
  margin: 15px 0;
}

#slika_mene {
  width: 14%;
  height: auto;
  display: block;
  /*
  float: left;
*/
}

<section id="sadrzaj">
  <aside>
    <figure>
      <img src="http://beerhold.it/600/600" alt="slika mene" id="slika_mene">
      <figcaption id="fig_moje_slike">Moja slika</figcaption>
    </figure>
  </aside>
  <ul>
    <li>bla bla</li>
    <li>bla bla</li>
    <li>bla bal</li>
    <li>blabla</li>
  </ul>
</section>

【讨论】：

当我这样做时，我的
项目会在图片下方，它们应该在图片的右侧，如何解决？

【解决方案3】：

您在 slika_mene 上添加了float:left。因此，如果您删除此属性，它将在您的 img 下进行

【讨论】：

【解决方案4】：

我知道了，只需在 #fig_moje_slike id 上使用 clear:left; 像这样

#fig_moje_slike{
    font-size: 9px;
    text-align: left;
    width: 50%;
    margin: 0;
    clear:left;
}

【讨论】：

【解决方案5】：

你不需要syle图片，你不应该，因为之后，如果你改变它，你必须重新设置它的样式，所以最好设置<figure>的样式，你不需要使用float完全从图片中删除id 并将样式添加到figure

这是一个例子，把width放在你想要的任何地方

并将其添加到img 标记

figure{
  width: 30%;
  height: auto;
  display: inline-block;
  margin-left:100px;
}
img{
  width:100%;
  height:auto;
}

【讨论】：

【解决方案6】：

从#fig_moje_slike 中移除 clear:left

HTML：

        <figure>
            <img src="http://placehold.it/120x120" alt="slika mene" id="slika_mene">
            <figcaption id="fig_moje_slike">Moja slika</figcaption> 
        </figure>

CSS：

#fig_moje_slike{
font-size: 9px;
text-align: left;
width: 50%;
margin: 0;
}

【讨论】：

【解决方案7】：

只需在#fig_moje_slike id 上使用clear:left; 我认为它会起作用

【讨论】：