在 Css 中为图像和文本创建一个统一的容器

Question

在我的一生中，你知道当你无法弄清楚制作一个简单的容器时出了什么问题，并且传递了似乎是正确的命令但没有产生正确的效果。我已经测试了我的外部样式表是链接的。我已经将文本从右向左浮动并以不同的变体进行了更改测试清除，以及隐藏溢出和大多数其他关于对齐的内容，因为目标是使用 17% 的响应边距。图像向左浮动，如下是当前经典级联样式的 Html 和 Css 结构。我试图让文本浮动在图像的右侧，高度与图像匹配`

'/*CSS Snippit */
 .leadercard {
  margin-top: 10%;
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}


/* On mouse-over, add a deeper shadow */

.leadercard:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* Add some padding inside the card container */

.container {
  padding: 2px 16px;
}

.leadercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
}


/* Add rounded corners to the top left and the top right corner of the image */

.leadercard>img {
  border-radius: 5px 5px 0 0;
}


/* This was used in the p tages as well */

.assetp {
  display: inline-block;
  color: red;
}

.assetdiv>p {
  align: right;
}


/* End of "This was used in the p tages as well" */

#parentAssetBox {
  overflow: hidden;
}

<div class=".leadercard #parentAssetBox">
  <div class=".leadercard .container assetdiv">
    <img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg">
    <p> comprehensive overview of merchants current finance options</p>

    <p>Free email campaigns that we send to your customers monthly with your branding and promotions</p>

    <p>Negotiate special deals and terms with new and current finance companies</p>
  </div>
</div>

Answer 1

请告诉我，您要在下面的示例中更改什么，我只是缩小了图像。 并从 HTML 中的类名中删除 .。

编辑

正如您在此处看到的，我已将 flex 添加到您的 .assetdiv，这将允许您的文本出现在图片旁边。

您的容器将像这样适合您的图像

现在，如果您缩小显示，即尝试使其响应，您的文本高度将迫使您的外部容器扩展。像这样

还有一种方法可以隐藏溢出。像这样

如果您正在寻找第三张图片的解决方案，请告诉我，否则当前的修复将适合您。

'/*CSS Snippit */
 .leadercard {
  margin-top: 10%;
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}


/* On mouse-over, add a deeper shadow */

.leadercard:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}


/* Add some padding inside the card container */

.container {
  padding: 2px 16px;
}

.leadercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  /* 5px rounded corners */
}


/* Add rounded corners to the top left and the top right corner of the image */

.leadercard .inner >img {
  border-radius: 5px 5px 0 0;
  height: 200px;
}
/* This was used in the p tages as well */

.assetdiv>p {
  align: right;
}


/* End of "This was used in the p tages as well" */

#parentAssetBox {
  overflow: hidden;
}

.assetdiv{
  display:flex;
  overflow:hidden;
}

.para .par{
  overflow:hidden;
}

.para{overflow:hidden;
border:1px solid red;}

<div class="leadercard parentAssetBox">
  <div class="container assetdiv">
    <div class="inner">
      <img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg">
    </div>
    <div class="inner para">
      <div class="par">
    <p> comprehensive overview of merchants current finance options</p>

    <p>Free email campaigns that we send to your customers monthly with your branding and promotions</p>

    <p>Negotiate special deals and terms with new and current finance companies</p>
      </div>
    </div>
  </div>
</div>