当一张卡片获得更多内容时，w3-cards 不会调整高度

Posted 2023-03-28

技术标签:

【中文标题】当一张卡片获得更多内容时，w3-cards 不会调整高度【英文标题】：w3-cards aren't adjusting height when one card gets more content 【发布时间】：2020-04-09 07:01:38 【问题描述】：

我的 html 表单上有一组三个 w3-card 元素，它们彼此相邻。自上周五以来，我一直在做这件事，我已经尝试了我能想到的一切。

这是我的代码：

<div class="w3-cell-row">
  <a href="www.testsite.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
                <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div> 
                <i class="fa fa-info-circle" aria-hidden="true" style="font-size: 120px;"></i>
                <br/><br/> 
            </div>
            <div>
                <h4>Click here for:<br/></h4>
            </div>
            <div>
            <br/> 
                <p>text<br/></p>
                <p>text<br/></p>
                <p>text<br/><br/></p>
            <br/> 
            </div> 
        </div>
    </div>
    </a>
    <a href="www.testsite2.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
                <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div>
                <i class="fa fa-question" aria-hidden="true" style="font-size: 120px;"></i>
                <br/><br/> 
            </div>
            <div>
                <h4>Click here for:<br/></h4>
            </div>
            <div> 
            <br/>
                <p>text<br/></p>
                <p>text<br/></p>
                <p>text<br/><br/></p>
            <br/>
            </div>
        </div>
    </div>
  </a>
  <a href="www.testsite3.com" style="color: #232f3e";> 
    <div class="w3-cell w3-third">
        <div class="w3-container w3-card" style="text-align: center;">
            <h3> 
            <br/> 
            </h3>
            <h3>h3 title<br/><br/></h3>
            <div> 
                <i class="fa fa-globe" aria-hidden="true" style="font-size: 120px;"></i>
                <br/><br/>
            </div>
            <div>
                <h4>Click here for:<br/></h4>
            </div>
            <div> 
            <br/>
                <p>test<br/></p>
                <p>test<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
                <p>tests<br/></p>
            <br/>
            </div>
        </div>  
    </div>
  </a>
</div>

在一张卡片中，我有一堆文字，使底部比其他两张卡片更突出。 a href 标记围绕着每张单独的卡片，以便它可以点击。我也在使用 FontAwesome.css 来添加图标。

我想要的是所有三张卡片都与卡片的高度相匹配，其中包含最多的文字。因此，如果内容应该改变并且一个框比另一个框获得更多的文本，它将在所有三张卡片的顶部和底部排列（连续）。如果窗口的宽度也应该改变，这应该保持不变。

这是我正在使用的 W3.css 代码的 reference，这是样式表本身的 location。另外，这是我在代码中使用的特定reference 来尝试使其工作。

非常感谢您的宝贵时间。

编辑：我尝试使用 flex 属性，将主 div 与类“w3-cell-row”分配给类“flex-test”。然后，我在我的 CSS 文件中为这个类分配了以下属性：

.flex-test 
  display: flex;
  flex-direction: row;

w3-third 属性把所有东西都弄乱了，当我删除它时，我看到它基本上是一样的：没有调整统一的底部。

【问题讨论】：

能否分享完整代码？我想看看你把 3 个 div 放在哪里。谢谢完成！让我知道这是否是您想要的。注意：<br> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。 【参考方案1】：

好的，我想我找到了解决方案：

首先：您在这段代码中有一些错误，例如在 ; 之外的 "" 内联样式

示例：style="color: #232f3e";

然后：

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="w3-cell-row">
      <div class="w3-container w3-cell">
        <a href="www.testsite.com" style="color: #232f3e" ;>
          <div class="w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-info-circle"
                aria-hidden="true"
                style="font-size: 120px;"
              ></i>
              <br /><br />
            </div>
            <div>
              <h4>Click here for:<br /></h4>
            </div>
            <div>
              <br />
              <p>text<br /></p>
              <p>text<br /></p>
              <p>text<br /><br /></p>
              <br />
            </div>
            
          </div> </a
        >
      </div>

      <div class="w3-container w3-cell">
        <a href="www.testsite2.com" style="color: #232f3e" ;>
          <div class=" w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-question"
                aria-hidden="true"
                style="font-size: 120px;"
              ></i
              > <br /><br />
            </div>
            <div>
              <h4>Click here for:<br /></h4>
            </div>
            <div>
              <br />
              <p>text<br /></p>
              <p>text<br /></p>
              <p>text<br /><br /></p>
              <br />
            </div>
          </div>
        </a>
      </div>

      <div class="w3-container w3-cell">
        <a href="www.testsite3.com" style="color: #232f3e" ;>
          <div class=" w3-card" style="text-align: center;">
            <h3>
              <br />
            </h3>
            <h3>h3 title<br /><br /></h3>
            <div>
              <i
                class="fa fa-globe"
                aria-hidden="true"
                style="font-size: 120px;"
                ></i
              > <br /><br />
            </div>
            <div>
              <h4>Click here for:<br /></h4>
            </div>
            <div>
              <br />
              <p>test<br /></p>
              <p>test<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <p>tests<br /></p>
              <br />
            </div>
          </div>
        </a>
      </div>
    </div>
  </body>
</html>

你需要添加这些css：

.w3-cell-row 
  display: flex;


.w3-container 
  flex:1;


.w3-card 
  height: 100%;

这里有我的代码：请查看它。我发现容器应该使用 w3-cell 而不是 w3-card，并且容器的高度相同（不是卡片）。另外，我已经删除了 w3-third 因为它没有必要。

希望它对您有所帮助，很抱歉没有更具体，只是我必须去上班。干杯！

【讨论】：

我知道你正在上班的路上，但我只是想报告一下：这段代码不起作用。这些盒子现在甚至不在同一行，第三个盒子在下一行（这很奇怪）。我三重检查以确保我没有任何错误，并且我完全复制了您的代码。对不起，给我几个小时我完成我的课程，我会回复你 @user87826 我有 2 分钟，我在一个新的 html 中对其进行了测试，但我仍然正确地看到了这一点。如果我更改包含 html 完整页面的代码，您可以试试吗？我刚刚把你的代码和我的 css 扔进了 codepen，在我的屏幕上出现了同样的情况：不均匀的盒子。 @user87826 我不知道发生了什么。我让它在这里运行并且运行良好，但它在 codepen 中不起作用。我添加了样式，你看到了吗？【参考方案2】：

只要回答任何愿意回答的人就可以了。这是我的解决方案：

 <div class="w3-cell-row">
  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-info-circle"
            aria-hidden="true"
            style="font-size: 120px;"
          ></i>
          <br /><br />
        </div>
        <div>
          <h4>Click here for:<br /></h4>
        </div>
        <div>
          <br />
          <p>text<br /></p>
          <p>text<br /></p>
          <p>text<br /><br /></p>
          <br />
        </div>
      </div>
  </div>

  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-question"
            aria-hidden="true"
            style="font-size: 120px;"
          ></i
          > <br /><br />
        </div>
        <div>
          <h4>Click here for:<br /></h4>
        </div>
        <div>
          <br />
          <p>text<br /></p>
          <p>text<br /></p>
          <p>text<br /><br /></p>
          <br />
        </div>
      </div>
  </div>

  <div class="w3-container w3-cell">
      <div class="w3-container w3-card w3-cell" style="text-align: center;">
        <h3>
          <br />
        </h3>
        <h3>h3 title<br /><br /></h3>
        <div>
          <i
            class="fa fa-globe"
            aria-hidden="true"
            style="font-size: 120px;"
            ></i
          > <br /><br />
        </div>
        <div>
          <h4>Click here for:<br /></h4>
        </div>
        <div>
          <br />
          <p>test<br /></p>
          <p>test<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <p>tests<br /></p>
          <br />
        </div>
      </div>
    </a>
  </div>
</div>

我所做的只是删除链接。在 div 的层次结构中，存在该链接会导致所有问题。取下它后，它会反应并完美排列。

【讨论】：

以上是关于当一张卡片获得更多内容时，w3-cards 不会调整高度的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Flutter 中使用 Hero 转换期间未运行的动画/动画？

使用 ajax 和 rails 将多个参数保存在单个数组中

使用 useEffect 时状态变为空

将元素附加到数组后，它应该显示更多元素

Reactjs：使用状态挂钩单击时如何选择一张或多张卡片？

翻转卡不会在第二个动画上保持后部div