html - Flex/Grid 标题高度过高
问题描述
我有一个使用flexbox列出的产品列表。每个弹性项目都有一个标题、描述和库存状态（图像也有，但在本例中不是必需的）。
我的问题是标题和描述有不同的文本长度（见我的例子）。
我使用网格布局设置标题的高度相同，效果很好。但是在某些情况下，标题的高度太高而且看起来不太好（检查橙色水平线）。我使用fr 单位来计算高度，它增加了太多。
有没有机会在不使用固定高度的情况下获得相同的标题和描述高度，但又不会增加太多高度？我需要标题后面的水平线，并且标题和描述之间不需要太多空白。
body {
font: 80% 'Roboto Slab',serif;
font-weight: normal;
font-size: 80%;
line-height: normal;
color: #000;
}
h2 {
}
.categories, .main-products, .related-products {
width:960px;
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.category, .product {
display: flex;
flex-direction: column;
width: 31%;
margin: 0 20px 20px 0;
background-color:
#EDE6D9;
text-align: center;
justify-content: flex-start;
flex: 1 0 auto;
position:relative;
}
.product-tags {
position: absolute;
right: -8px;
top: 10px;
}
.category-image, .product-image {
display: block;
background-color:
#FFF;
height: 160px;
vertical-align: middle;
overflow: hidden;
margin-bottom: 15px;
}
.product-middle {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1.5fr auto;
}
.category h1, .category h2, .product h1, .product h2 {
color:
#3A2923;
font-weight: 700;
text-transform: none;
font-size: 160%;
margin: 0 0 30px;
position: relative;
}
.stock_status {
text-align: center;
margin-bottom: 0;
font-size: 85%;
margin-top: 20px;
}
.product .product-middle div.perex_overview {
margin: 0;
line-height: 1.4em;
text-align: justify;
}
.category-middle, .product-middle {
padding: 0 30px 20px;
flex: 1 0 auto;
}
.product-heading-line {
position: absolute;
bottom: -16px;
width: 100%;
height: 100%;
background: url(https://www.optimtop.cz/web/resources/images/product_sep.png) center bottom no-repeat;
}
.product > div:not(.product-middle) {
font-size:2em;
margin:20px 0;
}<html>
<head>
<title>My Example</title>
</head>
<body>
<div class="main-products">
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-premium-400-kg/" title="Dřevěné válcové brikety MIX PREMIUM, 400 kg">
Dřevěné válcové brikety<br>MIX PREMIUM,<br>400 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné válcové brikety </span><strong>MIX PREMIUM</strong><span><span> </span>jsou charakteristické extrémním slisováním, které v kombinaci s velmi kvalitní dřevní hmotou prodlužují briketám dobu hoření a žhnutí na maximum. </span></p> > <a href="/drevene-valcove-brikety-mix-premium-400-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-hard-top-dub-buk-720-kg/" title="Dřevěné válcové brikety HARD TOP, dub/buk, 720 kg">
Dřevěné válcové brikety HARD TOP, dub/buk,<br>720 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety <strong>RUF HARD SPECIAL</strong> jsou vyrobené ze speciální, velmi kvalitní dřevěné hmoty složené z tvrdých dřevin (dub, buk, habr jasan). <span style="color: #0000ff;">Před dodáním briket RUF HARD SPECIAL telefonicky kontaktujeme zákazníka, z důvodu případné drobné změny hmotnosti briket na paletě. Cena 5,80 Kč za 1 kg briket se však nemění.</span> </p> > <a href="/drevene-brikety-ruf-hard-special-750-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-extra-720-kg/" title="Dřevěné válcové brikety MIX EXTRA, 720 kg">
Dřevěné válcové brikety MIX EXTRA,<br>720 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Válcové brikety <strong>MIX EXTRA</strong> jsou lisovány na moderním mechanickém lisu pod vextrémním tlakem až 2 500 kg/cm</span><sup>2</sup><span>.</span></p> > <a href="/drevene-valcove-brikety-mix-extra-720-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-extra-power-s-dirou-840-kg/" title="Dřevěné válcové brikety EXTRA POWER s dírou, 840 kg">
Dřevěné válcové brikety<br>EXTRA POWER s dírou,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné válcové brikety <strong>EXTRA POWER s dírou</strong> jsou vyráběny z čistých a suchých dubových pilin, do kterých je přimíchané menší množství borovicových pilin.</p> > <a href="/drevene-valcove-brikety-extra-power-s-dirou-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-puk-hard-top-500-kg/" title="Dřevěné válcové brikety PUK HARD TOP, 500 kg">
Dřevěné válcové brikety PUK HARD TOP,<br>500 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné válcové brikety <strong>PUK HARD TOP</strong> jsou vyrobeny ze suchých čistých pilin velmi kvalitní dřevní hmoty z tvrdých listnatých dřevin: dub, buk, habr jasan.</p> > <a href="/drevene-valcove-brikety-puk-hard-top-500-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-brikety-kurove-premium-816-kg/" title="Noční brikety kůrové PREMIUM, 816 kg">
Noční brikety kůrové PREMIUM,<br>816 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span><strong>Noční kůrové</strong> brikety <strong>PREMIUM</strong> jsou charakteristické extrémním slisováním a výrazně prodlouženou dobou hoření a žhnutí, až 6 - 8 hodin.</span></p> > <a href="/nocni-brikety-kurove-premium-816-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-hard-top-840-kg/" title="Dřevěné brikety RUF HARD TOP, 840 kg">
Dřevěné brikety<br>RUF HARD TOP,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety<strong> RUF HARD TOP</strong> jsou vyráběné moderní technologií ze suchých čistých hoblin a pilin tvrdého, bukového a habrového dřeva.</p> > <a href="/drevene-brikety-ruf-hard-top-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-hard-mix-dub-buk-816-kg/" title="Dřevěné brikety RUF HARD MIX, dub/buk, 816 kg">
Dřevěné brikety<br>RUF HARD MIX, dub/buk,<br>816 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Brikety nejvyšší kvality <strong>RUF HARD MIX</strong> jsou vyráběny ze směsi tvrdých dřevin (dub/buk). </span></p> > <a href="/drevene-brikety-ruf-hard-mix-dub-buk-816-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-840-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 840 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p>Dřevěné brikety <strong>RUF MIX EXCELLENT</strong> jsou vyráběné z výběrová dřevní hmota, převážně tvořené z tvrdého dřeva,které v kombinaci s extrémním stlačením, garantuje vysokou výhřevnost a dlouhou dobu hoření a žhnutí briket.</p> > <a href="/drevene-brikety-ruf-mix-excellent-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-extra-840-kg/" title="Dřevěné brikety RUF MIX EXTRA, 840 kg">
Dřevěné brikety<br>RUF MIX EXTRA,<br>840 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p style="text-align: justify;">Dřevěné brikety <strong>RUF MIX EXTRA</strong> jsou charakteristické velmi kvalitním slisováním na moderní německé technologické lince. <span style="color: #0000ff;">Dárek zdarma - pytel podpalovacích třísek.</span></p> > <a href="/drevene-brikety-ruf-mix-extra-840-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 4 - 6 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product from">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-420-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 420 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>420 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné brikety </span><strong>RUF MIX EXCELLENT</strong><span><span> </span>jsou vyráběné z výběrové dřevní hmoty na moderní technologické lince.<span style="color: #008080;"> </span></span><span style="color: #008000;"><strong>Dárek zdarma – zátopové třísky ze suchého dřeva (3kg)</strong></span></p> > <a href="/drevene-brikety-ruf-mix-excellent-420-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-hard-extra-dubove-460-kg/" title="Dřevěné válcové brikety HARD EXTRA, dubové, 460 kg">
Dřevěné válcové brikety<br>HARD EXTRA, dubové,<br>460 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><span>Dřevěné válcové brikety nejvyšší jakosti se vyznačují extrémním slisováním, které v kombinaci s jemnou frakcí velmi kvalitní dřevní hmoty (100% dub), prodlužují briketám dobu hoření a žhnutí na maximum. Prémiové válcové brikety HARD EXTRA jsou určené pro celodenní intenzivní topení a lze s nimi topit v kamnech, kotlech s ručním přikládáním a uzavřených i otevřených krbech.</span></p> > <a href="/drevene-valcove-brikety-hard-extra-dubove-460-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-valcove-brikety-kurove-max-10-kg/" title="Noční válcové brikety kůrové MAX, 10 kg">
Noční válcové brikety<br> kůrové MAX,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Noční kůrové</strong><span><span> </span>válcové brikety<span> </span></span><strong>MAX</strong><span><span> </span>jsou charakteristické extrémním slisováním a především maximální dobou hoření. </span></p> > <a href="/nocni-valcove-brikety-kurove-max-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-valcove-brikety-mix-premium-10-kg/" title="Dřevěné válcové brikety MIX PREMIUM, 10 kg">
Dřevěné válcové brikety<br>MIX PREMIUM,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných válcových briket MIX PREMIUM je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-valcove-brikety-mix-premium-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/nocni-brikety-kurove-premium-8-kg/" title="Noční brikety kůrové PREMIUM, 8 kg">
Noční brikety kůrové PREMIUM,<br>8 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> nočních kůrových briket PREMIUM je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/nocni-brikety-kurove-premium-8-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-excellent-10-kg/" title="Dřevěné brikety RUF MIX EXCELLENT, 10 kg">
Dřevěné brikety<br>RUF MIX EXCELLENT,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX EXCELLENT je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-brikety-ruf-mix-excellent-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-extra-10-kg/" title="Dřevěné brikety RUF MIX EXTRA, 10 kg">
Dřevěné brikety<br>RUF MIX EXTRA,<br>10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX EXTRA je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy. </p> > <a href="/drevene-brikety-ruf-mix-extra-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
<div class="product no-margin">
<div> Image </div>
<div class="product-middle">
<h2>
<a href="/drevene-brikety-ruf-mix-top-dub-buk-10-kg/" title="Dřevěné brikety RUF MIX TOP, dub/buk, 10 kg">
Dřevěné brikety<br>RUF MIX TOP,<br>dub/buk,<br> 10 kg </a>
<div class="product-heading-line"></div>
</h2>
<div class="perex_overview">
<div class="text">
<p><strong>Jedno balení</strong> dřevěných briket RUF MIX TOP je určené zejména k otestování a vyzkoušení zboží před zakoupením celé palety.</p>
<p> </p>
<p>Cena zboží je včetně dopravy.</p> > <a href="/drevene-brikety-ruf-mix-top-dub-buk-10-kg/" title="více informací">více
informací</a>
</div>
</div>
<div class="stock_status">
<strong class="stat_in_stock">Skladem - dodání 5 - 7 pracovních dní</strong>
</div>
</div>
<div> Buy Button, Price </div>
</div>
</div>
</body>
</html>解决方案
如果您希望所有标题具有相同的高度，您不会使其灵活，我建议您使用 flex 元素作为其原始范围。如果标题文本的长度是可变的，那么您不能在所有卡片的文本和底部边框之间同时拥有固定的高度和相同的空间......在你的情况下，我只需将 grid-template-rows 的第一个值设置为“汽车”：
.product-middle
{
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1.5fr auto;
}
推荐阅读
- excel - 在 Excel 中使用 MEDIAN IF 函数作为索引？
- visual-studio-2017 - 重新定位到网络标准 2.0 后，无法构建解决方案和打开项目属性
- r - R.utils::withTimeout，在 Linux 上的工作方式与在 Windows 上不同
- timezone - 在 cypress.io (Windows) 中更改浏览器时区
- python - 如何在 re.findall 中使用字符串变量？
- python - 我们如何将 Python 脚本转换为 Matlab 代码？
- ios - CoreData：这个 NSPersistentStoreCoordinator 没有持久存储。它无法执行保存操作
- objective-c - Objective-c“多个”getter和绑定
- xml - 在一个文件中验证多个连接的 XML
- java - 在 graalvm 原生镜像中注册一个通过 Unsafe.allocateInstance 实例化的类