时间戳

首页 > 解决方案 > 如何在文本和块之间获得相同的空间

html - 如何在文本和块之间获得相同的空间

问题描述

我有一些商品块，并且有不同数量的文本的不同描述，我需要将其居中。“添加到购物车”按钮必须在一行中，而不取决于我有多少描述中的符号。不欢迎纯 css 解决方案（只是不是 jQuery 解决方案）。

窗帘高度的解决方案不适合！

（空格必须在描述和按钮“添加到购物车”之间）。

.parent {
  border: medium dashed green;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}

.child {
  align-self: stretch;
  border: medium dashed #c4c4c4;
  background-color: #fedba9;
  width: 40%;
}

.button {
  max-width: 350px;
  max-height: 50px;
  background-color: coral;
  margin: 0 auto;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/test.css" />
</head>

<body>
  <div class="parent">
    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
      </p>
      <div class="button">add to cart</div>
    </div>

    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
        laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
        ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
        officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
      </p>
      <div class="button">add to cart</div>
    </div>

    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>2342342 23423423 23423423</p>
      <div class="button">add to cart</div>
    </div>
    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>123123 12312</p>
      <div class="button">add to cart</div>
    </div>
  </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

  • 在您的物品上使用flex方向column.child
  • 使p内部增长以填充所有剩余空间
  • 使其本身flex易于使文本居中

.parent {
  border: medium dashed green;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}

.child {
  align-self: stretch;
  border: medium dashed #c4c4c4;
  background-color: #fedba9;
  width: 40%;
  display: flex;
  flex-direction: column;
}

.child p {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.button {
  max-width: 350px;
  max-height: 50px;
  background-color: coral;
  margin: 0 auto;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/test.css" />
</head>

<body>
  <div class="parent">
    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
      </p>
      <div class="button">add to cart</div>
    </div>

    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
        laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
        ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
        officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
      </p>
      <div class="button">add to cart</div>
    </div>

    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>2342342 23423423 23423423</p>
      <div class="button">add to cart</div>
    </div>
    <div class="child">
      <img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
      <p>123123 12312</p>
      <div class="button">add to cart</div>
    </div>
  </div>
</body>

</html>

推荐阅读