文章/答案/技术大牛

发布

社区首页 >问答首页 >在CSS网格布局卡上对齐元素

问在CSS网格布局卡上对齐元素
EN

Stack Overflow用户

提问于 2020-10-16 00:09:41

回答 2查看 611关注 0票数 0

我发现这个有趣的CSS网格布局的卡片从一个网站，以及网络响应和移动响应，但我正在努力使所有的按钮对齐在同一行上的每一张卡，即使每张卡的文本是不一样的。有什么想法吗？

下面的代码

    <!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article img {
  max-width: 100%;
}
.text {
  padding: 0 20px 20px;
}
.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  }
</style>
<main class="grid">
  <article>
    <img src="/pix/samples/23m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Seamlessly visualize quality</h3>
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/24m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Completely Synergize</h3>
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
      <button>Here's how</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/22l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically Procrastinate</h3>
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
      <button>Read more</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/15l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Best in class</h3>
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
      <button>Just do it...</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

我喜欢每个卡片都有相同的大小等，当然，我可以做很多与一些CSS过渡属性，如使整个卡片是完整的图像，当你悬停时，你可以看到卡上的文字，但出于好奇，我想让这些按钮始终对齐在卡片的底部。

html

css

css-grid

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-16 00:16:06

由the guide保存

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid>article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  display: flex; /* <-------------- changes */
  flex-direction: column; /* <-------------- changes */
}

.grid>article img {
  max-width: 100%;
}

.text {
  padding: 0 20px 20px;
  flex-grow: 1;
  display: flex; /* <-------------- changes */
  flex-direction: column; /* <-------------- changes */
}

.text>p {
  flex-grow: 1; /* <-------------- changes */
}

.text>button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
}

<main class="grid">
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Seamlessly visualize quality</h3>
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Completely Synergize</h3>
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
      <button>Here's how</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Dynamically Procrastinate</h3>
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
      <button>Read more</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Best in class</h3>
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
      <button>Just do it...</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

简而言之，文章元素和嵌套的.text元素都需要是具有适当配置的弹性列。

票数 1

Stack Overflow用户

发布于 2020-10-16 00:24:25

像这样的东西应该行得通。

.text {
  display: grid;
  height: 90%;
  grid-template-rows: auto 1fr auto;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64375594

复制

相似问题

问在CSS网格布局卡上对齐元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS网格布局卡上对齐元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS网格布局卡上对齐元素
EN