Question

我想为这些图像而不是整个行都打上框。

我尝试将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;  
 }

我只希望对图像进行着色，而不是对所有行进行着色。

Answer 1

您可以为<img>中的所有<div>标签设置样式。 CSS看起来像这样：

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

这是在img内设置所有.caja-img元素的样式。

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

我在使用html结构时遇到麻烦

2 个答案: