AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 76925709
Accepted
mr.boris
mr.boris
Asked: 2023-08-18 07:55:23 +0800 CST2023-08-18 07:55:23 +0800 CST 2023-08-18 07:55:23 +0800 CST

CSS 网格:包裹并适合内容

  • 772

我想包装我的列表,同时使其适合如下内容:

在此输入图像描述

问题是每个元素必须适合其内容的宽度。

我已经找到了如何包装固定大小的项目的 示例,但它对我的情况没有帮助:grid-template-columns: repeat( 12, minmax(250px, 1fr) );

我尝试了几种组合,但没有成功,列表要么固定在一行,要么元素相互重叠。我也找不到这个案例的任何好的例子。

<style>
.container {
  width: 450px;
  padding: 5px;
  border: 1px solid black;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat( auto-fit, minmax(min-content, 30px) );
}
.item {
  padding: 5px;
  border: 1px solid black;
  border-radius: 7px;
  white-space: nowrap;
}
</style>
<div class="container">
  <div class="item">First item</div>
  <div class="item">Second item</div>
  <div class="item">Some text here</div>
  <div class="item">Example</div>
  <div class="item">Wrapped item</div>
  <div class="item">Another wrapped item</div>
</div>

这就是我现在得到的:

在此输入图像描述

css
  • 1 1 个回答
  • 13 Views

1 个回答

  • Voted
  1. Best Answer
    Brett Donald
    2023-08-18T08:32:59+08:002023-08-18T08:32:59+08:00

    网格产生行和列,就像电子表格一样。您想要的布局最好使用弹性盒来实现。

    .container {
      width: 450px;
      padding: 5px;
      border: 1px solid black;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .item {
      padding: 5px;
      border: 1px solid black;
      border-radius: 7px;
      white-space: nowrap;
    }
    <div class="container">
      <div class="item">First item</div>
      <div class="item">Second item</div>
      <div class="item">Some text here</div>
      <div class="item">Example</div>
      <div class="item">Wrapped item</div>
      <div class="item">Another wrapped item</div>
    </div>

    • 1

相关问题

  • 是否可以在元素之间对齐渐变?

  • 带盒阴影的圆角边缘 - Tailwind CSS

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve