图片下方的文字位于其他图片的顶部？答案

【问题标题】：text under the image goes at the top of the other images?图片下方的文字位于其他图片的顶部？
【发布时间】：2016-02-04 20:01:38
【问题描述】：

所以我正在制作这个小游戏，您需要在图像下方拖动文本。我需要在需要将文本拖到的图像下制作小标签。

我想在图像周围放置一个 div，并在选项卡的 div 中放置另一个 div，在 css 中，我将选项卡的高度设置为 25px。但是 25px 不在同一 div 中的图像下方，而是在该行中的其他图像上方..

这就是我看到的，http://prntscr.com/9yv7m8 红色空间是选项卡，需要在图片下方..

我该如何正确解决这个问题？

这是我的代码， CSS

body, html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}

header {
  height: 5%;
  border-bottom: thick solid grey;
}

footer {
    height: 5%;
    border-top: thick solid grey;
}
.points {
    float: right;
}
.container {
  width: 100%;
  height: 90%;
}

.plaatje {
  width: 100px;
  height: 100px;
}
.plaatje2 {
  float: left;
  width: 25%;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.sprint {
  float: right;

}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}

.img {
  width: 25%;
  height: 25%;
  float: left;
}
.img2 {
  width: 25%;
  height: 25%;
  float: left;
}
.answer {
  height: 25px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Words</title>

    <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

  <script>
  </script>

</head>
<body>

<header>
 <span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen">&nbsp;igen</span>
 <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige:  &nbsp;&nbsp;&nbsp; 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 0</span>
</header>

<div class="container">
<div>
    <img class="img" src="img/cat.jpg" alt="cat" />
    <div class="answer">

    </div>
</div>

    <img class="img" src="img/beak.jpg" alt="beak" />
    <img class="img" src="img/spoon.jpg" alt="spoon" />
    <img class="img" src="img/milk.jpg" alt="milk" />

    <img class="img2" src="img/egg.jpg" alt="egg" />
    <img class="img2" src="img/thee.jpg" alt="tea" />
    <img class="img2" src="img/meel.jpg" alt="meel" />
    <img class="img2" src="img/passport.jpg" alt="passport" />
</div>

<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> &copy;2013 laerdansk / FC-Sprint&sup2; Leerbedrijf bronnen </span></center>
</footer>

</body>
</html>

【问题讨论】：

尝试使用 clear :both
clear ：两者都解决了部分问题，我需要猫图片下方的标签，而其他图片仍在猫旁边..现在其他图片仍在标签下方..我'我尝试在 div 中设置所有图片，并在其下方设置标签.. 但它不能解决问题.. prntscr.com/9yv9el （红线是标签所在的地方.. 如果我尝试更多，会发生这种情况，@987654323 @

标签： html css image tabs

【解决方案1】：

我不确定这是您要找的...

<html>
<title>test</title>
<head>
</head>
<body>
    <style>
    .top{background-color: #900; width: 100%; height: 100px;}
    .middle{background-color: #090; width: 100%; height: 600px; float: left;}
    .sidebar{background-color: #ccc; width: 10%; height: 600px; float: left;}
    .container{background-color: #000; width: 90%; height: 600px; float: left;}
    .row{background-color: #fff; width: 100%; height: 100px; float: left;}
    .footer{background-color: #090; width: 100%; height: 100px; float: left;}
    .slice{background-color: #069; width: 33%; height: 100px; float: left;}
    </style>
    <div class="top">top</div>
    <div class="middle">
        <div class="sidebar">sidebar</div>
        <div class="container">
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
            <div class="row">
                <div class="slice">1</div>
                <div class="slice">2</div>
                <div class="slice">3</div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>

【讨论】：

这不是我想要的，虽然我可以很好地使用一些代码，谢谢你的努力！我需要将这个 SWF 文件重建为 HTML/JS prntscr.com/9yw96v 这就是我需要的外观..