那些遇到过的问题

对齐不同块的子元素

use*_*998 10 css css-grid

我有一份商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片、标题、描述、价格和购买按钮，必须以这种方式调整大小和位置：商品行中的所有标题、描述、价格和照片必须位于相同的 y 坐标位置，并且具有height 是一行中对应高度元素的最大值。

我试过这个：“网格模板行：1fr 1fr 1fr 1fr 30px;” 使一行中的所有子元素都位于相同的 y 位置，但我需要它们的高度以适应内容并且不高于一行中的最大元素。PS 您可以使用 flex 或任何您想要的方式提供代码。

代码

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  grid-template-rows: 1fr 1fr 1fr 1fr 30px;
  display: grid;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="Grid">

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>
Run Code Online (Sandbox Code Playgroud)

Pau*_*e_D 7

目前 (2019/06)* 使用任何 CSS 布局方法都无法做到这一点。

display:subgrid解决了这个问题，但目前还限制了浏览器的非实验性采用。*

*[2019/12 更新] - Subgrid 现在在 Firefox 71 中发布

支持@CanIuse.com

——

默认情况下，它在 Firefox 71+ 中启用，因此可以进行测试。在完全采用之前，需要Javacript来均衡元素高度。

来自 Rachel Andrew（CSS-Grid 传播者）的一些资源链接

  1. https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

和

  1. 子网格上的 YouTube 视频

  2. 还有一个

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.Grid {
  display: grid;
  width:90%;
  margin:auto;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  display:grid;
  grid-row: span 5; /* as we have 5 card components in each card */
  grid-template-rows:subgrid;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

.price {
padding:.5em;
text-align:center;
}

img {
  max-width:100%;
  display: block;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="Grid">

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>
Run Code Online (Sandbox Code Playgroud)

结果输出（FF Nightly）

在此处输入图片说明

She*_*aff 5

可以说，您可以实现同样的目标，尽管subgrid会更加痛苦。

在我的示例中，我没有更改 HTML，因此我用来display: contents将子级提升到 DOM 树的一级。但是，如果您可以更改标记并且不介意由此产生的混乱，那么您也可以在不使用display: contents.

.Grid {
    display: grid;
    grid-gap: 10px;
}
.loon-card {
    display: contents;
}
img {
    width: 100%;
    grid-row-start: 1;
}
.short-description {
    grid-row-start: 2;
}
.long-description {
    grid-row-start: 3;
}
.price {
    grid-row-start: 4;
}
button {
    grid-row-start: 5;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="Grid">

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>12.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
			<br />Title:5
			<br />Title:6

		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
			et lorem ac nulla scelerisque egestas.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
			et lorem ac nulla scelerisque egestas.
		</div>
		<div class='price'>12.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>14.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>15.00$</div>
		<button>buy</button>
	</div>
</div>
Run Code Online (Sandbox Code Playgroud)

  • @Wreeecks，这就是为什么我提出一个没有子网格的解决方案。 (5认同)

归档时间：

查看次数：

3636 次

最近记录：

5 年，7 月 前
相关归档
为什么我的div高度为零 123
通过缩放内容来抑制WKWebView,以与UIWebView相同的放大率进行渲染 65
绝对定位和文本对齐 45
垂直对齐图像和多行文本 27
如何使用渐变背景制作纯CSS div？ 24
如何居中 - 显示:块/内联块 22
如何根据CSS中页面中另一个元素的状态选择元素？ 20
CSS显示:在<li>标签上使用list-style-image:property的内联属性 19
在输入字段上恢复Webkit的CSS大纲 17
在Bootstrap中将滚动导航栏添加到浏览器顶部 16
难疑归档
如何水平居中<div>？ 4116
如何在不手动指定编码的情况下在C#中获得字符串的一致字节表示？ 2121
如何使用Git将标签推送到远程存储库？ 2091
什么是三法则？ 2067
如何格式化Microsoft JSON日期？ 1954
Bower和npm有什么区别？ 1723
如何将堆栈跟踪转换为字符串？ 1435
.gitignore被Git忽略了 1407
如何在Python中通过索引从列表中删除元素？ 1381
在Bash中循环遍历一串字符串？ 1371