Блог

Главная - Вопросы по программированию - У меня проблемы со структурой html

У меня проблемы со структурой html

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я хочу создавать поля для этих изображений, а не для всей строки.

Я попытался поместить тег div в класс с именем caja-img, который содержит определенную ширину.

HTML

 <div class="col-md">
    <div class="contenido">
        <div class="caja-img">
            <img src="img/icon1.png" alt="Autogestion">
        </div>
        <h3 class='text-center'>Facil y seguro!</h3>
    </div>
</div>

CSS

 .caja-img {
    background-color: red;  
 }

Вместо того, чтобы раскрашивать всю строку, я просто хочу раскрасить изображение.

Комментарии:

1. Извините, что вы подразумеваете под цветом изображения?

2. вам нужна граница изображения?

3. я имею в виду, окрашивая только то, что содержит «caja-img».

Ответ №1:

Вы можете стилизовать все <img> теги в своем <div> . CSS будет выглядеть так:

 .caja-img img{
    background-color: red;  
}

То, что это делает, — это стилизация всех img элементов внутри .caja-img .

Ответ №2:

Вы можете установить элемент с классом .caja-img на display: inline-block .

Смотрите пример кода ниже:

 .caja-img {
  background-color: red;
  display: inline-block;
}  
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="contenido">
    <div class="caja-img">
      <img src="img/icon1.png" alt="Autogestion">
    </div>
    <h3 class='text-center'>Facil y seguro!</h3>
  </div>
</div>