Лучший способ разместить текст под изображением?

Question

Мне было трудно понять это. Когда я впервые попытался заставить текст оставаться под картиной, это было float ed влево все время. Этот код, похоже, работает, но я думаю, что я сделал что-то неправильно, потому что, когда вы меняете .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

Вы уже установили width изображений, помещая их в различных li-х гг. Когда вы укажете, что у них есть width: 100%, вы просто приказываете им взять свой контейнер, а именно li, который имеет width20%.

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