我在使用 html 结构时遇到问题答案

【问题标题】：Im having trouble with an html structure我在使用 html 结构时遇到问题
【发布时间】：2019-09-10 16:05:45
【问题描述】：

我想为这些图像制作盒子，而不是为整行。

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

我不想为所有行着色，我只想为图像着色。

【问题讨论】：

对不起，你给图片上色是什么意思？
你想要图片的边框吗？
我的意思是，只为“caja-img”包含的内容着色。

标签： html css bootstrap-4

【解决方案1】：

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

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

这是在为.caja-img 内的所有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>

【讨论】：