css 在图像上设置填充并防止文本流出父容器

8e2ybdfx 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(116)

我有下面的组件，它有一个图像（应该有设置的宽度/高度）和25 px的外部填充。
然而，我真的很难安排标记，使描述文本位于图像下方（不侵犯填充），同时不允许文本流到父容器的宽度之外。有谁能告诉我哪里错了吗？
当前代码段显示了徽标容器填充内的说明文本：

.logoTile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logoTile .logo-container {
  width: 20.8rem;
  height: 17.4rem;
  padding: 4rem 2.4rem;

}

.logoTile .logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.description-text {
  text-align: center;
}

个字符
最终目标：
宽度为20.8rem，高度为17.4rem的图像-所有侧面均为25 px-图像正下方（填充外）应该是描述文本，它不应该比上面的图像宽。

css

来源：https://stackoverflow.com/questions/76819459/setting-padding-on-an-image-and-prevent-text-from-flowing-outside-of-parent-cont

1条答案

按热度按时间

kpbwa7wx1#

使用padding，这将起作用，您需要为两个单独的容器提供一个基础容器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .wrapper {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
  }

  .image-wrapper {
    width:20.8rem;
    height:17.4rem;
    background:#efefef;
    padding:4rem 2.4rem;
    border-radius:4px;
    display:flex;
    flex-direction:column;
  }

  .image-wrapper .image {
    width:100%;
    height:100%;
  }

  .image img {
    width:100%;
    height:100%;
  }

  .wrapper .text {
    width:20.8rem;
    padding:4rem 2.4rem;
    height:200px;
    background:#d3cdcd;
  }
  </style>
</head>
<body>
  <div class="wrapper">
  <div class="image-wrapper">
    <div class="image">
      <img src="../images/favicon.png">
    </div>
  </div>
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe tempora accusantium voluptatibus vitae cumque temporibus inventore similique rerum aspernatur ab. Maiores nihil consectetur libero recusandae dolorum consequuntur quas, officiis repellendus.</p>
  </div>
  </div>
</body>

字符串
图像和文本。

赞(0）回复(0）举报 2023-08-09

我来回答

css 在图像上设置填充并防止文本流出父容器

1条答案

相关问题

热门标签

最新问答