在卡片之間對齊卡片子元素-有解無憂

我有一堆疊在一頁上的卡片。我希望帶有文本的元素跨卡片對齊，并且我還希望專案符號跨卡片對齊。我猜這意味著我希望上面和下面的元素在其中包含最多內容的卡片中占據該元素的高度。我看到了一些使用 CSS 網格提到的可能解決方案，但是當有多行卡片時，這似乎不起作用。有沒有其他 CSS 解決方案可以在這里作業？謝謝

請注意，卡片中的所有內容的高度都可能不同，因此設定固定高度不起作用。

.main {
  background: #f7f7f7;
  height:100vh;
  font-family:Arial;
}

p {
  color:blue;
}

h1{
  font-size:20px;
}

.container {
  width:80%;
  margin: 0 auto;
}

.cards-container {
  display:flex;
  flex-wrap:wrap;
}

.card {
  background: white;
  flex-basis:32%;
  margin-left:1%;
  margin-bottom:1%;
}

<div class="main">
   <div class="container">
      <div class="cards-container">
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can vary depending on the content</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can very depending onthe content inside of it, it can be very long</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here</h1>
            <p>LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
      </div>
   </div>
</div>

uj5u.com熱心網友回復：

如果您不介意為此使用 CSS 框架，您可以查看UIKit 的高度匹配。你只需要uk-height-match像這樣添加一個帶有屬性的 UIKit 網格：

<div uk-grid uk-height-match="target: .card > p.match-height">
    <div class="card">
            <h1>Title goes here</h1>
            <p class="match-height">LINE UP </p>
            <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
         <div class="card">
            <h1>Title goes here and this can vary depending on the content</h1>
            <p class="match-height">LINE UP </p>
            <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
            <ul>
               <li>list item</li>
               <li>list item</li>
            </ul>
         </div>
</div>

請注意，標簽match-height上的類p是可選的，但建議在添加多個p標簽時防止出現錯誤。

uj5u.com熱心網友回復：

好訊息，您可以使用subgrid輕松做到這一點

壞訊息（截至 2021 年 11 月）支持不是很好

body {
  background: #f7f7f7;
}

.main {
  height: 100vh;
  font-family: Arial;
}

p {
  color: blue;
}

h1 {
  font-size: 20px;
}

.cards-container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1%;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  padding: 1rem;
  background: white;
  border-radius: 1rem;
}

<div class="main">
  <div class="cards-container">

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>
    <div class="card">
      <h1>Title goes here and this can vary depending on the content</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam nisi eius illo sed libero deserunt rem neque? Repellat quo tempora voluptates illo? Fugit sed quasi quia adipisci officiis quo corrupti.</div>
      <ul>
        <li>list item</li>
        <li>list item</li>

      </ul>
    </div>
    <div class="card">
      <h1>Title goes here and this can very depending onthe content inside of it, it can be very long</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>

      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

    <div class="card">
      <h1>Title goes here</h1>
      <p>LINE UP </p>
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempor</div>
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>
    </div>

  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353274.html

標籤：html css

上一篇：如何在div中將溢位內容顯示為完整

下一篇：帶有背景漸變和填充的內嵌文本