圖片下方的文字會出現在其他圖片的頂部？

所以我正在製作這個小遊戲，你需要在圖像下拖動文本。我需要在需要拖動文本的圖像下面製作小標籤。圖片下方的文字會出現在其他圖片的頂部？

我想在圖像周圍放置一個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>

來源

2016-02-04 A.Jaasma

嘗試使用明確的：既 – Sinto

明確：既做解決部分問題，我需要貓圖片下方的標籤，其他圖片仍然在貓旁邊..現在其他圖片仍然在標籤下方.. 我試過設置所有圖片在它下面的標籤res的div ..但它不能解決問題.. http://prntscr.com/9yv9el （紅線是標籤的位置.. 如果我嘗試更多發生這種情況， http://prntscr.com/9yvac1 –

我不知道這是你找......

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

來源

2016-02-04 12:01:38 Sinto

這不完全是我要找的，儘管我可以很好地使用一些代碼，謝謝！我需要重建這個SWF文件，到HTML/JS http://prntscr.com/9yw96v 這就是我需要的樣子.. –

圖片下方的文字會出現在其他圖片的頂部？

回答

相關問題