將文字置於圖像下方的更好方法？

Question

我很難搞清楚這一點。當我第一次嘗試讓文字留在圖片下時，它始終保持着float。此代碼似乎工作，但我認爲我做錯了什麼，因爲當您將.resmontage ul寬度從70%更改爲60%時，所有圖片都會變小。他們不留在我最初指定的width或height。

爲什麼我需要將.resmontage img設置爲width: 100%才能使其與.resmontage li一起使用？如果我從resmontage li刪除寬度一切都會搞砸了！我知道你可以使用bootstrap，但我更喜歡自己做。

#bt { 
 
    color: white; 
 
    margin-top: 1%; 
 
    margin-left: -8%; 
 
} 
 
.resmontage ul { 
 
    float: left; 
 
    background-color: black; 
 
    width: 70%; 
 
    height: 25%; 
 
    padding-left: 7%; 
 
    margin-top: 1%; 
 
    border-radius: 1%; 
 
} 
 
.resmontage li { 
 
    list-style-type: none; 
 
    width: 20%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    padding-right: 3%; 
 
} 
 
.resmontage img { 
 
    width: 100%; 
 
    height: 65%; 
 
} 
 
.hello { 
 
    text-align: center; 
 
    color: white; 
 
    margin-top: 2%; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: both; 
 
    clear: both; 
 
}

<div class="resmontage clearfix"> 
 
    <ul> 
 
    <div id="bt">Games that will be released next month.</div> 
 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" /> 
 
     <div class="hello">Gta v</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" /> 
 
     <div class="hello">CSGO</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" /> 
 
     <div class="hello">Rocket League</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" /> 
 
     <div class="hello">Witcher 3</div> 
 
    </li> 
 

 
    </ul> 
 
</div>

Answer 1

您已經將它們放置在不同的li的設置圖像的width。當你指定他們有width: 100%時，你只是告訴他們拿起他們的容器，即li，其width的20%。

#bt { 
 
    color: white; 
 
    margin-top: 1%; 
 
    margin-left: -8%; 
 
} 
 
.resmontage ul { 
 
    float: left; 
 
    background-color: black; 
 
    width: 70%; 
 
    height: 25%; 
 
    padding-left: 7%; 
 
    margin-top: 1%; 
 
    border-radius: 1%; 
 
} 
 
.resmontage li { 
 
    list-style-type: none; 
 
    width: 20%; 
 
    margin-top: 1%; 
 
    float: left; 
 
    padding-right: 3%; 
 
} 
 
.resmontage img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.hello { 
 
    text-align: center; 
 
    color: white; 
 
    margin-top: 2%; 
 
}

<div id="bt">Games that will be released next month.</div> 
 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/en/a/a5/Grand_Theft_Auto_V.png" /> 
 
     <div class="hello">Gta v</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://media.steampowered.com/apps/valvestore/images/slider/store_image_02.png" /> 
 
     <div class="hello">CSGO</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Rocket_League_coverart.jpg" /> 
 
     <div class="hello">Rocket League</div> 
 
    </li> 
 

 
    <li> 
 
     <img src="http://blogs-images.forbes.com/erikkain/files/2014/12/The-Witcher-3-Wild-Hunt.jpg" /> 
 
     <div class="hello">Witcher 3</div> 
 
    </li> 
 

 
    </ul> 
 
</div>

所有的