Question

我试图用3张卡片在网站上显示最新消息。在宽屏幕上，它看起来很像

然而，当我将页面调整为从卡片中溢出的内容时

这是代码snipplet

<div class="row">
    <div class="col s4">
      <div class="card small">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>  </div>
        </div>
      </div>

      <div class="col s4">
        <div class="card small">
          <div class="icon-block">
            <h2 class="center brown-text"><i class="material-icons">group</i></h2>
            <div class="card-content">
              <h5 class="center"><?php echo $children[1]->title; ?></h5>

              <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
            </div>  </div>
          </div>
        </div>

        <div class="col s4">
          <div class="card small">
            <div class="icon-block">
              <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
              <div class="card-content">
                <h5 class="center"><?php echo $children[0]->title; ?></h5>

                <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
              </div>  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

这是因为你的卡片中添加了small课程。删除该类，卡片将根据您的内容调整大小。使用Materialise卡时，small，medium和large类都会限制卡的高度，无论内容如何。

另外，为了获得更具响应性的外观，您应该考虑将col类更改为类似的内容，并添加container div，以帮助您居中并包含您的内容：

<div class="container">
 <div class="row">
  <div class="col s12 m4">
   <div class="card">
    <div class="icon-block">
      <h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
      <div class="card-content">
        <h5 class="center"><?php echo $children[2]->title; ?></h5>

        <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
      </div>  
     </div>
    </div>
   </div>

  <div class="col s12 m4">
    <div class="card">
      <div class="icon-block">
        <h2 class="center brown-text"><i class="material-icons">group</i></h2>
        <div class="card-content">
          <h5 class="center"><?php echo $children[1]->title; ?></h5>

          <p class="light"><?php custom_echo($children[1]->body, 200); ?></p>
        </div>  
       </div>
      </div>
     </div>

    <div class="col s12 m4">
      <div class="card">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons">settings</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[0]->title; ?></h5>

            <p class="light"><?php custom_echo($children[0]->body, 200); ?></p>
          </div>  
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

尝试将.icon-block div放在.card-content内。如果问题仍然存在，请尝试摆脱.icon-block课程，看看卡片如何在没有它的情况下做出反应。

使用类.card-content的div将在内部的所有内容周围均匀地提供20px的卡片填充，并overlflow:hidden。这应该给你的卡片结构。

<div class="row">
  <div class="col s4">
    <div class="card ">
      <!-- card-content- gives padding and overflow hidden to the content inside -->
      <div class="card-content">
        <div class="icon-block">
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <div class="card-content">
            <h5 class="center"><?php echo $children[2]->title; ?></h5>

            <p class="light"><?php custom_echo($children[2]->body, 200); ?></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

此外，随着屏幕尺寸变小，您可能希望将卡片调整到中小型设备，而不是在中小型设备上连续使用3张卡片，这就是为什么文本会聚集在一起而变得不那么方便使用的。你可以这样做，以始终保持卡的宽度非常接近。唯一的缺点是，如果您不希望卡片随着它变小而堆叠。

<div class="row">
  <!-- notice columns for each device size - small - medium -large -->
  <div class="col s10 offset-s1 m6 l4">
    <div class="card">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">flash_on</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- notice columns for each device size - small - medium -large -->
  <div class="col s10 offset-s1 m6 l4">
    <div class="card ">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">group</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>

        </div>
      </div>
    </div>
  </div>
  <!-- notice columns for each device size - small - medium -large -->
  <!-- 0n medium size it offsets this card to center it on the next row keeping all cards the same size no matter the row -->
  <div class="col s10 offset-s1 m6 offset-m3 l4">
    <div class="card ">
      <div class="card-content">
        <div class="icon-block">
          <!-- I changed the size of the icon to .medium -->
          <!-- Sizes you can use .tiny .smal .medium .large -->
          <h2 class="center brown-text"><i class="material-icons medium">settings</i></h2>
          <!-- give the card-title class to your titles -->
          <div class="card-title">
            <h5 class="center">Title</h5>
          </div>
          <p class="light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie placerat diam, eu dignissim massa aliquam eget. Proin nunc mauris, convallis ut felis rutrum, tempor pharetra magna. Fusce at sollicitudin neque, in mollis quam. Etiam finibus
            a erat rutrum pellentesque.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Working Example

如果问题仍然存在，请使用您的css更新您的问题。

卡片调整大小物化

2 个答案: