文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使元素填充行，但在三列后溢出到新行，填充宽度/间隔均匀。

问使元素填充行，但在三列后溢出到新行，填充宽度/间隔均匀。
EN

Stack Overflow用户
提问于 2022-11-15 14:16:39
回答 1查看 35关注 0票数 1

我试图让元素逐行(而不是砖石结构)填充容器，扩展到完全填充行，并均匀地间隔，每行最多有三个元素。(我认为这个必须包含在前面的问题中，但我一直找不到我要找的东西。)

这个片段显示了我正在寻找的结果，包括一个元素、两个元素、三个等等(在本例中使用网格，但我不担心它是网格、flex还是其他什么)，但是它非常难看，需要为每个变体(columns-1、columns-2等)设置CSS类。并且我为容器上的内容指定了正确的类：

​

代码语言：javascript
复制
/* Basic Styles */
html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    padding: 8px;
}

h2 {
    margin: 0;
    margin-top: 0.5rem;
    font-size: inherit;
}

/* The container for items */
.container {
    width: 500px;
    border: 1px solid black;
    padding: 8px;

    display: grid;
    grid-row-gap: 4px;
    grid-column-gap: 4px;
    justify-items: stretch;
}

/* An item in the container */
.container > span {
    background-color: #8ab1de;
    color: #1a2550;
    font-weight: 600;
    min-width: fit-content;
    padding: 4px;
    white-space: nowrap;
    flex-basis: auto;
    text-align: center;
}

/* Additional styles for container for ONE item */
.container.columns-1 {
    grid-template-columns: 1fr;
}
/* Additional styles for container for TWO items */
.container.columns-2 {
    grid-template-columns: 1fr 1fr;
}
/* Additional styles for container for THREE items */
.container.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
/* Additional styles for container for FOUR items */
.container.columns-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
/* Additional styles for container for FIVE items */
.container.columns-5 {
    grid-template-areas:
        "a a b b c c"
        "d d d e e e";
}
.container.columns-5 :nth-child(1) {
    grid-area: a;
}
.container.columns-5 :nth-child(2) {
    grid-area: b;
}
.container.columns-5 :nth-child(3) {
    grid-area: c;
}
.container.columns-5 :nth-child(4) {
    grid-area: d;
}
.container.columns-5 :nth-child(5) {
    grid-area: e;
}

/* Additional styles for container for SIX items */
.container.columns-6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Seven or more would be unhandled */
代码语言：javascript
复制
<h2>One item:</h2>
<div class="container columns-1">
    <span>Some Item</span>
</div>

<h2>Two:</h2>
<div class="container columns-2">
    <span>Some Item</span>
    <span>Some Other Item</span>
</div>

<h2>Three:</h2>
<div class="container columns-3">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
</div>

<h2>Four:</h2>
<div class="container columns-4">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
    <span>A Fourth Item</span>
</div>

<h2>Five:</h2>
<div class="container columns-5">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
    <span>A Fourth Item</span>
    <span>A Fifth Item</span>
</div>

<h2>Six:</h2>
<div class="container columns-6">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
    <span>A Fourth Item</span>
    <span>A Fifth Item</span>
    <span>A Sixth Item</span>
</div>

<h2>And so on...</h2>

​

所以：

  • 表示一个、两个或三个元素，将它们放置在一行中，为四个元素平均填充可用空间
  • ，在每行放置两个元素，五个元素放置四个等号
  • 元素，在第一行放置三个等号元素，在第二个
  • 中为六个元素放置两个等号元素，每个元素行放置三个等号

F 215。

理想情况下，除了实际项之外，使用不变的标记，因此对于一个元素：

代码语言：javascript
复制
<div class="container">
    <span>Some Item</span>
</div>

三个人：

代码语言：javascript
复制
<div class="container">
    <span>Some Item</span>
    <span>Some Other Item</span>
    <span>Another Item</span>
</div>

诸若此类。

在理想世界中，每行元素的数量将由它们的内容(类似于fit-content)动态确定，而不是我给出的任意数字(3)，但对于特定的用例，如果必须选择任意数字，我可以。

我试图用CSS而不是JavaScript来解决这个问题。如果这是不可能的，那么我将写JavaScript来做它，但我希望我的斗争是我的CSS无知。

css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-15 15:21:46

这里有一个使用flexbox的方法，您可以根据使用nth-child的元素数来调整挠性基。

​

代码语言：javascript
复制
h2 {
  margin: 0;
  margin-top: 0.5rem;
  font-size: inherit;
}

.container>span {
  background-color: #8ab1de;
  color: #1a2550;
  font-weight: 600;
  padding: 4px;
  white-space: nowrap;
  text-align: center;
}

.container {
  width: 500px;
  border: 1px solid black;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* only column */
}

.container>* {
  flex: 1; /* same width at each row */
}

/* when 4 elements */
.container > :first-child:nth-last-child(4),
.container > :first-child:nth-last-child(4) ~ * {
  flex-basis: 40%; /* bigger than 33% and smaller than 50% */
}
/* when 5 elements and more */
.container > :first-child:nth-last-child(n + 5),
.container > :first-child:nth-last-child(n + 5) ~ * {
  flex-basis: 30%; /* bigger than 25% and smaller than 33% */
}
代码语言：javascript
复制
<h2>One item:</h2>
<div class="container">
  <span>Some Item</span>
</div>

<h2>Two:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
</div>

<h2>Three:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
</div>

<h2>Four:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
</div>

<h2>Five:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
</div>

<h2>Six:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
  <span>A Sixth Item</span>
</div>

<h2>And so on...</h2>

​

涉及9个要素：

​

代码语言：javascript
复制
h2 {
  margin: 0;
  margin-top: 0.5rem;
  font-size: inherit;
}

.container>span {
  background-color: #8ab1de;
  color: #1a2550;
  font-weight: 600;
  padding: 4px;
  white-space: nowrap;
  text-align: center;
}

.container {
  width: 500px;
  border: 1px solid black;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* only column */
}

.container>* {
  flex: 1; /* same width at each row */
}

/* when 4 elements */
.container > :first-child:nth-last-child(4),
.container > :first-child:nth-last-child(4) ~ *{
  flex-basis: 40%;
}
/* when 5 elements and more */
.container > :first-child:nth-last-child(n + 5),
.container > :first-child:nth-last-child(n + 5) ~ * {
  flex-basis: 30%;
}
/* when 7 elements */
.container > :nth-child(4):nth-last-child(4),
.container > :nth-child(4):nth-last-child(4) ~ *{
  flex-basis: 40%;
}
代码语言：javascript
复制
<h2>One item:</h2>
<div class="container">
  <span>Some Item</span>
</div>

<h2>Two:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
</div>

<h2>Three:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
</div>

<h2>Four:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
</div>

<h2>Five:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
</div>

<h2>Six:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
  <span>A Sixth Item</span>
</div>

<h2>Seven:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
  <span>A Sixth Item</span>
  <span>A 7 Item</span>
</div>

<h2>Eight:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
  <span>A Sixth Item</span>
  <span>A 7 Item</span>
  <span>A 8 Item</span>
</div>

<h2>Nine:</h2>
<div class="container">
  <span>Some Item</span>
  <span>Some Other Item</span>
  <span>Another Item</span>
  <span>A Fourth Item</span>
  <span>A Fifth Item</span>
  <span>A Sixth Item</span>
  <span>A 7 Item</span>
  <span>A 8 Item</span>
  <span>A 9 Item</span>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/74447121

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档