2023年6月29日 20:18:13go评论61阅读模式

英文:

Use tailwind grid with horizontally dynamic size of content (Masonry, but horizontal)

问题

I am trying to achieve dynamically display of span elements horizontally. 当没有足够的空间时，让它们移动到第二行，依此类推。 Right now it looks close but not what is expected the code to do. 这样看起来接近，但代码的实际效果与预期不符。 Here is the sandbox. 这是 sandbox。 And this is the code: 这是代码：

On image you can see how it is displayed now: 在图像上，您可以看到当前的显示方式：

The result should be something like this: 结果应该类似于这样：

Results in case if whitespace-nowrap is applied on the spans: 如果在这些 span 元素上应用 whitespace-nowrap，则结果如下：

If you look at Masonry style, it is similar to what I try to get, only the difference is that horizontal fitting is prioritized. 如果您查看 Masonry 样式，它与我想要的效果类似，唯一的区别是优先考虑了水平适应。

英文:

I am trying to achieve dynamically display of span elements horizontally. When there is no place left, let them move uncut on the second line and so on. Right now it looks close but not what is expected the code to do. Here is the sandbox. And this is the code:

export default function Home({ clientData }) {
  return (
    &lt;div className=&quot;p-2 w-[200px] bg-white &quot;&gt;
      {clientData.addons.map((addon, i) =&gt; {
        return (
          &lt;span
            key={&quot;addon&quot; + i}
            className={
              addon.value
                ? &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]&quot;
                : &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold&quot;
            }
          &gt;{addon.label}&lt;/span&gt;
        );
      })}
    &lt;/div&gt;
  );
}

export async function getStaticProps() {
  return {props: {clientData: {addons: [{ value: true, label: &quot;test&quot; },{ value: false, label: &quot;test test&quot; },{ value: false, label: &quot;testtesttesttest&quot; },{ value: false, label: &quot;test a&quot; },{ value: false, label: &quot;test test 23&quot; },{ value: false, label: &quot;test 36&quot; },],},},};
}

On image you can see how it is displayed now:

The result should be something like this:

Results in case if whitespace-nowrap is applied on the spans:

If you look at Masonry style, it is similar to what I try to get, only the difference is that horizontal fitting is prioritized.

答案1

得分: 1

考虑使用水平弹性布局，并允许换行。如果希望每行显示为“满行”，请通过grow类将flex-grow: 1应用于<span>元素。

function Home({ clientData }) {
  return (
    <div className="p-2 w-[200px] bg-white flex flex-wrap gap-2">
      {clientData.addons.map((addon, i) => {
        return (
          <span
            key={"addon" + addon.id + i}
            className={
              addon.value
                ? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
                : "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
            }
          >
            {addon.label}
          </span>
        );
        // })
      })}
    </div>
  );
};

const props = {
  clientData: {
    addons: [
      { value: true, label: "test" },
      { value: false, label: "test test" },
      { value: false, label: "testtesttesttest" },
      { value: false, label: "test a" },
      { value: false, label: "test test 23" },
      { value: false, label: "test 36" },
    ],
  },
};

ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>);

你也可以考虑应用inline-block并使用margin来调整它们的间距，但你会失去一些控制：

function Home({ clientData }) {
  return (
    <div className="p-2 w-[200px] bg-white">
      {clientData.addons.map((addon, i) => {
        return (
          <span
            key={"addon" + addon.id + i}
            className={`inline-block mr-2 mb-2 ${
              addon.value
                ? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
                : "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
            }`}
          >
            {addon.label}
          </span>
        );
        // })
      })}
    </div>
  );
};

const props = {
  clientData: {
    addons: [
      { value: true, label: "test" },
      { value: false, label: "test test" },
      { value: false, label: "testtesttesttest" },
      { value: false, label: "test a" },
      { value: false, label: "test test 23" },
      { value: false, label: "test 36" },
    ],
  },
};

ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>);

英文:

Consider using a horizontal flex layout that can wrap. If you would like each row to appear "full", apply flex-grow: 1 via the grow class to the <span> elements.

function Home({ clientData }) {
return (
&lt;div className=&quot;p-2 w-[200px] bg-white flex flex-wrap gap-2&quot;&gt;
{clientData.addons.map((addon, i) =&gt; {
return (
&lt;span
key={&quot;addon&quot; + addon.id + i}
className={
addon.value
? &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]&quot;
: &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold&quot;
}
&gt;
{addon.label}
&lt;/span&gt;
);
// })
})}
&lt;/div&gt;
);
};
const props = {
clientData: {
addons: [
{ value: true, label: &quot;test&quot; },
{ value: false, label: &quot;test test&quot; },
{ value: false, label: &quot;testtesttesttest&quot; },
{ value: false, label: &quot;test a&quot; },
{ value: false, label: &quot;test test 23&quot; },
{ value: false, label: &quot;test 36&quot; },
],
},
};
ReactDOM.createRoot(document.getElementById(&#39;app&#39;)).render(&lt;Home {...props}/&gt;)

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js&quot; integrity=&quot;sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js&quot; integrity=&quot;sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;body class=&quot;bg-slate-700 text-white&quot;&gt;
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

You could also consider applying inline-block with margin to space them out, but you have a little less control:

function Home({ clientData }) {
return (
&lt;div className=&quot;p-2 w-[200px] bg-white&quot;&gt;
{clientData.addons.map((addon, i) =&gt; {
return (
&lt;span
key={&quot;addon&quot; + addon.id + i}
className={`inline-block mr-2 mb-2 ${
addon.value
? &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]&quot;
: &quot;border px-4 py-1 text-[#262833]/70 rounded-md font-semibold&quot;
}`}
&gt;
{addon.label}
&lt;/span&gt;
);
// })
})}
&lt;/div&gt;
);
};
const props = {
clientData: {
addons: [
{ value: true, label: &quot;test&quot; },
{ value: false, label: &quot;test test&quot; },
{ value: false, label: &quot;testtesttesttest&quot; },
{ value: false, label: &quot;test a&quot; },
{ value: false, label: &quot;test test 23&quot; },
{ value: false, label: &quot;test 36&quot; },
],
},
};
ReactDOM.createRoot(document.getElementById(&#39;app&#39;)).render(&lt;Home {...props}/&gt;)

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js&quot; integrity=&quot;sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js&quot; integrity=&quot;sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;body class=&quot;bg-slate-700 text-white&quot;&gt;
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;/body&gt;

答案2

得分: 0

flex-wrap flex gap-2 在主要的 <div> 中解决了问题：

英文:

flex-wrap flex gap-2 in the main <div> resolved the issue:

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

使用Tailwind Grid与内容的水平动态大小（类似砖瓦排列，但水平方向）。

问题

答案1

答案2

如何使用JavaScript更改HTML选择元素中的选择内容？

Python BeautifulSoup的find_all()方法返回不必要的元素。

隐藏按钮在指定条件下未显示出来。

圆角未应用于
内的所有角落？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论