Html 在位置相对div内浮动2个div

我有一个关于在一个位置相对div中浮动2个div的问题。它们应该向左浮动，但不起作用。我尝试过几次，在开发者工具中重写CSS。我希望有人能帮助我。我使用谷歌公司的MDL（Material Design Lite）响应框架。结果应该如屏幕截图所示。提前感谢你的帮助

.card是一种人工智能卡{
最小高度：0；
宽度：100%；
最小高度：110px；
高度：自动；
盒影：0 1px 1px 0 rgba（0,0,0,015），0 3px 1px-2px rgba（0,0,0,15），0 1px 5px 0 rgba（0,0,0,015）；
h4{
字体大小：$卡片标题；
颜色：$深色文本；
左边距：12px；
利润上限：3倍；
}
.img{
背景：灰色；
显示：内联块；
身高：100%；
位置：绝对位置；
宽度：117px；
img{
身高：100%；
位置：绝对位置；
宽度：100%；
}
.循环检查{
背景：rgba（黑色，0.4美元）；
高度：56px；
宽度：56px；
边界半径：100%；
位置：绝对位置；
左：计算（50%-30px）；
顶部：calc（50%-25px）；
&：悬停{
背景：rgba（$red，1）；
}
}

检查
密特拉梅里卡
信息

我无法真正运行您的代码，缺少的变量太多，无法解决此问题。因此，我重新编写了代码。我希望这能有所帮助。您只需管理宽度并浮动剩余的所有变量：

看看这个

编辑：JSFIDLE链接起初不正确。如果代码完全与其他内容相关，请重新单击此链接

编辑2：修复了代码中的填充错误。并替换了JSFIDLE链接

html:

<div class="header-area">
  <div style="padding: 20px; ">
    Yellow header
  </div>
</div>

<div class="container">
  <div class="element" style="background-color: green; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: red; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: orange; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      <div class="text">
        This is the description
      </div>
    </div>
  </div>
</div>

---

我无法真正运行您的代码，缺少的变量太多，无法解决此问题。因此，我重新编辑了代码。我希望这能有所帮助。您只需管理宽度并浮动剩余的所有变量：

看看这个

编辑：JSFIDLE链接起初不正确。如果代码完全与其他内容相关，请重新单击此链接

编辑2：修复了代码中的填充错误。并替换了JSFIDLE链接

html:

<div class="header-area">
  <div style="padding: 20px; ">
    Yellow header
  </div>
</div>

<div class="container">
  <div class="element" style="background-color: green; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: red; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: orange; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      <div class="text">
        This is the description
      </div>
    </div>
  </div>
</div>

---

我对您的代码做了一些修改，希望它能帮助您完全实现您的目标：

• 要在img上定位文本，您需要相对定位其父文本，绝对定位文本。然后您可以将其移动到img上

• 为了方便地将img与其他元素对齐，我认为包装这些元素并给它们一个内联块显示是很有用的。然后你可以在你想要的位置调整它们

.card是一种人工智能卡{
最小高度：0；
宽度：100%；
最小高度：110px；
高度：自动；
盒影：0 1px 1px 0 rgba（0,0,0,015），0 3px 1px-2px rgba（0,0,0,15），0 1px 5px 0 rgba（0,0,0,015）；
}
h4{
字体大小：$卡片标题；
颜色：$深色文本；
}
.img{
背景：灰色；
显示：内联块；
身高：100%；
位置：相对位置；
宽度：117px；
}
.循环检查{
位置：绝对位置；
排名：0；
左：0；
背景：rgba（黑色，0.4美元）；
高度：56px；
宽度：56px；
边界半径：100%；
位置：绝对位置；
左：计算（50%-30px）；
顶部：calc（50%-25px）；
&：悬停{
背景：rgba（$red，1）；
}
}
.info包装器{
显示：内联块；
垂直对齐：顶部；
}

检查
密特拉梅里卡
信息

我对您的代码做了一些修改，希望它能帮助您完全实现您的目标：

• 要在img上定位文本，您需要相对定位其父文本，绝对定位文本。然后您可以将其移动到img上

• 为了方便地将img与其他元素对齐，我认为包装这些元素并给它们一个内联块显示是很有用的。然后你可以在你想要的位置调整它们

.card是一种人工智能卡{
最小高度：0；
宽度：100%；
最小高度：110px；
高度：自动；
盒影：0 1px 1px 0 rgba（0,0,0,015），0 3px 1px-2px rgba（0,0,0,15），0 1px 5px 0 rgba（0,0,0,015）；
}
h4{
字体大小：$卡片标题；
颜色：$深色文本；
}
.img{
背景：灰色；
显示：内联块；
身高：100%；
位置：相对位置；
宽度：117px；
}
.循环检查{
位置：绝对位置；
排名：0；
左：0；
背景：rgba（黑色，0.4美元）；
高度：56px；
宽度：56px；
边界半径：100%；
位置：绝对位置；
左：计算（50%-30px）；
顶部：calc（50%-25px）；
&：悬停{
背景：rgba（$red，1）；
}
}
.info包装器{
显示：内联块；
垂直对齐：顶部；
}

检查
密特拉梅里卡
信息

请提供已编译的css。请提供已编译的css。非常感谢@coozin，这对我更好地理解浮动有很大帮助。：）问候。没问题。：）请务必使用JSFIDLE，以便