有没有可能有一个高度固定但宽度可变的柱流单元网格？-前端问题

Is it possible to have a column-flow grid of elements with fixed height, but variable width?(有没有可能有一个高度固定但宽度可变的柱流单元网格？)

本文介绍了有没有可能有一个高度固定但宽度可变的柱流单元网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前在做一个网站，在那里我有一个水平对齐的、可滚动的卡片网格。以下是代码：数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

每张卡片都包含文本，在生产中文本的长度是可变的。

我希望卡片的设置高度为280px，最小宽度为350px，并且能够在文本填满卡片中的可用空间时水平扩展。

这可能吗？我现在已经尝试了几种不同的方法，但一无所获。当前正在使用网格，但如果可以的话，我很乐意使用FlexBox。

推荐答案

默认情况下，在html中垂直生长，因为block flow direction是从上到下的。我们可以使用writing-mode: vertical-lr;更改行为，但显示的文本将是竖线。
如果我们创建类似的文本div并使其垂直排列，则父div将增长到最佳宽度，并且我们的正文将不会有具有该宽度的滚动条。这是我奇怪的解决方案：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

缺点是您必须在页面上再保留一份隐藏的邮件副本。

如果你使用的是javascrip，你可以计算并直接设置‘Card-content’元素的宽度。以下是关于如何计算文本宽度Calculate text width with JavaScript的讨论。获得该值后，将其除以行数即可获得要设置的宽度。

这篇关于有没有可能有一个高度固定但宽度可变的柱流单元网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！