时间戳

首页 > 解决方案 > 调整到标题字长的容器元素的大小 - 如何修复它？（绝对初学者）

html - 调整到标题字长的容器元素的大小 - 如何修复它？（绝对初学者）

问题描述

我刚开始编码（两天前）并且正在关注 Dev Ed 的玻璃网页教程。

由于我刚开始，我不知道我是否能够正确地说出我的意思，所以我将展示示例

图片示例

我怎样才能使该容器中的元素独立于标题长度？我想保持其他元素的正常大小

.card {
  display: flex;
  background: linear-gradient(
    to left top,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.5)
  );
  border-radius: 1rem;
  margin: 2rem 0;
  padding: 2rem;
  box-shadow: 6px 6px 20px rgba(122, 122, 122, 0.2);
  justify-content: space-between;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="cards">
             <div class="card">
              <img src="/images/assassins.png" alt="" />
              <div class="card-info">
                <h2>Assassins Creed Valhalla</h2>
                <p>PS5 Version</p>
                <div class="progress"></div>
              </div>
              <h2 class="percentage">60%</h2>
            </div>
              <div class="card">
               <img src="/images/sackboy.png" alt="" />
               <div class="card-info">
                <span><h2>Sackboy </h2></span>
                 <p>PS5 Version</p>
                 <div class="progress"></div>
               </div>
               <h2 class="percentage">60%</h2>
             </div>

标签： htmlcss

解决方案

添加flex: 1到.card-info

flex仅当元素是具有 的容器的子元素时才可用的属性display: flex。它基本上告诉元素在碰到另一个元素之前尽可能地增加宽度。IT 也是flex-grow, flex-shrink and flex-basis.

有关更多信息，请参见此处：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于您是编码新手，因此最好在使用速记之前学习更详细的方法（flex-grow、flex-shrink 和 flex-basis）。

另外添加width: 100%也可以达到相同的结果，但如果添加flex-wrap: wrap到容器中可能会导致问题。

也欢迎编码。

推荐阅读