卡调整大小 Materialise

Question

我正在尝试使用 3 卡片显示网站上的最新消息。在宽屏幕上看起来不错

但是当我调整页面大小时内容从卡片溢出

这是代码片段

<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

尝试将 .icon-block div 放在 .card-content 中。如果问题仍然存在，请尝试摆脱 .icon-block class 只是为了看看卡片在没有它的情况下会如何反应。

使用 div 和 class .card-content 将使您的卡片在所有内容周围均匀地填充 20 像素，并且 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 更新您的问题。

Answer 2

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

此外，为了获得更灵敏的外观，您应该考虑将 class 列更改为如下所示，并添加一个 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>

卡调整大小 Materialise

Card resize Materialize

html

css

materialize