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

Question

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

＆＃13;

＆＃13;

'/*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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

修改

正如您在此处所看到的，我已将{flex}添加到您的.assetdiv，这样您的文字就会显示在图片旁边。

你的容器就像这样适合你的形象

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

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

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

＆＃13;

＆＃13;

'/*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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;