是否可以有一个具有固定高度但可变宽度的元素的列流网格？
Posted
技术标签:
【中文标题】是否可以有一个具有固定高度但可变宽度的元素的列流网格？【英文标题】：Is it possible to have a column-flow grid of elements with fixed height, but variable width? 【发布时间】：2022-01-01 01:06:42 【问题描述】：我目前正在一个网站上工作，我有一个水平对齐、可滚动的卡片网格。这是一个代码：
.testimonial-card
min-width: 350px;
height: 280px;
flex-basis: auto;
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="overflow-y-scroll gap-10 pb-4 flex flex-row justify-start">
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 overflow-x-scroll testimonial-card">
<div class="grid grid-flow-row justify-center items-stretch h-full gap-4">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
</div>每张卡片都包含文本，在生产中将具有可变长度。
我希望卡片设置高度为 280 像素，最小宽度为 350 像素，如果文本填满卡片中的可用空间，则能够水平扩展。
这可能吗？我现在尝试了几种不同的方法，但一无所获。目前正在使用网格，但如果可以的话，很乐意使用 flexbox。
【问题讨论】：
所以您不想让卡片上的滚动条而是展开，对吧？ 也许你可以改变你的例子，为不同的卡片设置不同长度的文本？ @onkar ruikar - 没错。我希望它们扩展（水平，而不是垂直 【参考方案1】：默认情况下，事物在 html 中垂直增长，因为 block flow direction 是自上而下的。我们可以使用writing-mode: vertical-lr; 更改行为，但显示的文本将是垂直线。
如果我们创建类似的文本 div 并使其垂直流动，那么父 div 将增长到最佳宽度，并且我们的主文本不会有该宽度的滚动条。
这是我奇怪的解决方案：
.testimonial-card
height: 280px;
flex-basis: auto;
.card-content
min-width: 350px; /*shifed min-width here*/
height: 7em;
position: relative;
/* using this to stretch parent enough to not have scroll */
.helper
visibility: hidden;
background-color: thistle;
writing-mode: vertical-lr;
overflow-wrap: break-word;
line-height: 1.3rem;
height: 7rem; /*limiting to 5 lines*/
.message
/*background-color: wheat;*/
border: 1px solid green;
width: 100%;
position: absolute;
top: 0px;
line-height: 1.3rem;
height: 8rem;
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="overflow-y-scroll gap-10 pb-4 flex flex-row justify-start">
<div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
<div class="card-content grid grid-flow-row items-stretch h-full gap-4">
<div class="helper">
1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam evenietamet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet.
</div>
<div class="message">
1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam evenietamet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet.
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
<div class="card-content grid grid-flow-row items-stretch h-full gap-4">
<div class="helper">
2 Lorem ipsum dolor sit, amet
</div>
<div class="message">
2 Lorem ipsum dolor sit, amet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
<div class="card-content grid grid-flow-row items-stretch h-full gap-4">
<div class="helper">
3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam
eveniet 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum
voluptatum veniam eveniet
</div>
<div class="message">
3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam
eveniet 3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum
voluptatum veniam eveniet
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
<div class="card-content grid grid-flow-row items-stretch h-full gap-4">
<div class="helper">
4 Hi!
</div>
<div class="message">
4 Hi!
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
<div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
<div class="card-content grid grid-flow-row items-stretch h-full gap-4">
<div class="helper">
5. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
<div class="message">
5. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
<div class="grid grid-flow-col items-center justify-start gap-4">
<div class="bg-gray-200 h-12 w-12 rounded-full"></div>
<div class="grid grid-flow-row items-center">
<div>David</div>
<div>United Kingdom</div>
</div>
</div>
</div>
</div>
</div>缺点是您必须在页面上再保留一份隐藏的消息副本。 如果您使用 javascript uou 可以进行计算并直接在“卡片内容”元素上设置宽度。这是关于如何计算文本宽度Calculate text width with JavaScript 的讨论。获得值后，将其除以行数以设置宽度。
【讨论】：
这是一个很好的解决方案，非常感谢分享！以上是关于是否可以有一个具有固定高度但可变宽度的元素的列流网格？的主要内容，如果未能解决你的问题，请参考以下文章