如何使 Flexbox 父级具有其子级的宽度?

2024-06-04

我有一个父元素,里面有两个元素:

<div class="parent">
  <div class="child">
     one
  </div>
  <div class="child">
    two
  </div>
</div>

目前,.parent 的宽度为 100%。我希望它只是两个孩子的宽度。

.parent {
  display: flex;
  background-color: aliceblue;
}

如何使父级的宽度等于其内容的宽度,而不是更宽?

请参阅 codepen 进行现场演示。 http://codepen.io/anon/pen/qOgdEg


更改父级的显示flex to inline-flex.

代码笔演示 http://codepen.io/anon/pen/jbdbYR

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使 Flexbox 父级具有其子级的宽度? 的相关文章

  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • JavaScript 和 jQuery 以及句点的使用

    我很困惑在引用类名时何时使用类名之前的句点 在此示例中 为什么 active slide 类的第一次使用事先使用了句点 而其他两个则没有 var main function dropdown toggle click function dr
  • 当内容悬停时变为粗体时防止表格扩展

    我正在处理一张表格 其中一个要求是每一行在悬停时变为粗体 我可以正常工作 但是当发生这种情况时 列的宽度会发生变化 有什么办法可以防止这种情况发生吗 table width 100 border 1px solid ccc margin t
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 有没有办法在 Nokogiri css 中转义非字母数字字符?

    我有一个锚标签 file html stuff morestuff CHP 1 SECT 2 1 尝试提取 Nokogiri 中引用的内容 documentFragment at css stuff morestuff CHP 1 SECT
  • 如何在响应式设计中禁用缩放功能?

    在使用 iPad iPhone 和 或其他智能手机时 如何禁用响应式设计页面中的放大和缩小功能 有什么办法可以控制吗 创建 META 视口标签 并设置用户可扩展属性为 否 如下所示 更新的答案
  • 三行无表 CSS 布局,中间行填充剩余空间

    我需要的是一个包含 3 行的基于像素高度的 div 最上面一行的高度根据内容而变化 底行具有固定高度 中间行填充任何剩余空间 一切都是宽度 100 我一直在努力构建一个 div 和基于 CSS 的布局几个小时 这让我从字面上看seconds
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • -webkit-overflow-scrolling:触摸;无效的属性值

    我不明白为什么这不起作用 我把它放在我的 html 和正文中 它仍然显示无效的属性值并被划掉 我首先尝试在媒体查询中使用它 但它在那里不起作用 有谁知道它对我不起作用的潜在原因 谢谢你 html body width 100 height
  • 关于调试打印样式表的建议?

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri
  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查
  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac
  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • 如何使链接悬停时的背景图像模糊?

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content
  • 自定义字体有时在 IE8 / IE7 中以斜体呈现

    在 IE7 和 IE8 中 当使用自定义 Web 字体时 文本有时会以斜体呈现 即使我明确设置font style normal 这个问题是偶发的 它会渲染几次 然后我刷新 一切都是斜体 然后我刷新 它恢复正常 我正在用这个 font fa
  • LESS CSS 在媒体查询中设置变量?

    我正在开发一个专门针对 iPad 的网站 为了使我的网站能够在视网膜显示屏 iPad 和旧版本 iPad 上运行 我想在媒体查询中的 LESS CSS 中设置一个变量 例如 media all and max width 768px rat
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • 如何显示不同页眉的页面? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在为我的学校项目开发网站 但我遇到了一个问题 我在每个页面上显示一个标题 我的标题之一包含登录表单 另一标题包含用户名 搜索栏等 问题是
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐

  • 在 R/exams exams2nops() 中用零填充初始学生 ID

    当使用exams为 NOPS 考试生成 PDF 文件的软件包我想编辑学生可用的位数 reglength 我知道该软件包只允许至少 7 位数字 然而 我们学生的身份证号码只有5位数字 因此我想知道是否可以通过 PDF 操作来编辑模板 我尝试过
  • 匹配字符串在多列上循环

    我有来自一项开放式调查的数据 我有一个注释表和一个代码表 代码表是一组主题或字符串 我正在尝试做的事情 检查代码表中相关列中是否存在开放式注释中的单词 字符串 在评论表中为特定主题添加一个新列 并添加一个二进制 1 或 0 来表示已标记哪些
  • 如何使用jdbc驱动编写事务?

    我想使用 jdbc 编写一个事务java 我尝试过这个简单的交易 BEGIN TRANSACTION NL GO NL UPDATE table SET col test where id 1010 NL GO NL COMMIT 我尝试过
  • 如何使用 MSBuild 更改 AssemblyProduct、AssemblyTitle?

    我有一个 MSBuild 脚本 它编译我现有的解决方案 但我想更改其中一个项目的一些属性within编译时的解决方案 包括但不限于AssemblyProduct和AssemblyTitle 这是我的构建脚本的片段
  • 使用 mariaDB 将 sql 转储文件安装到 docker 容器

    我刚刚学习 docker 的基础知识 但一直停留在从本地系统导入 SQl 文件上 我使用的是 Windows 10 并允许我的 docker 容器访问我的共享驱动器 我有一个位于 D 上的 SQL 文件 我想导入到从 docker hub
  • python 中使用 scipy 截断正态分布

    我正在尝试使用截断正态分布scipy在Python3 我想做一些简单的事情 绘制以 0 5 为中心 范围从 0 到 1 的截断法线的 pdf 我有以下代码行 from scipy import truncnorm import matplo
  • flowlayoutpanel和水平滚动条问题

    我正在使用一个 flowlayoutpanel 它有很多逻辑上的按钮 我遇到的问题是 当我调整窗口大小时 当窗口变小时 我无法看到所有水平排列的按钮 相反 当窗口变小时 按钮会下降到下一行 谁能帮我解决这个问题 我只是希望按钮水平排列 当窗
  • 在 C++ 中从另一个数组初始化结构内的数组[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions struc
  • 如何使用“std::array”作为“template class”形式的模板参数?

    请考虑以下事项tree class template
  • Sublime Text 2 包控制错误

    CTRL SHIFT P gt Package control Install package 如果我去这里 我会立即收到错误 Package Control There are no packages available for inst
  • 中断QThread睡眠

    我想知道如何暂停 QThread 然后在收到信号时恢复 我已阅读并知道我可以做这样的事情 def run self self ready False while not self ready self sleep 1 QtCore Slot
  • 如何以编程方式创建 Unwind segue

    我制作了一个不使用故事板的应用程序 在我的应用程序的这一部分中 我需要创建一个展开转场ThirdViewController to FirstViewController仅以编程方式 我知道如何使用 sotorybard 执行此操作 但找不
  • 匹配贪婪、非贪婪和介于两者之间的所有其他[重复]

    这个问题在这里已经有答案了 给定一个像这样的字符串 foo bar baz quux 把它想象成unixy系统上文件的路径 我如何 如果可能的话 制定一个正则表达式 为我提供所有可能包含文件的路径quux 换句话说 在针对给定字符串运行正则
  • SQLiteAssetHelper 甚至在从资产文件夹复制数据库之前就导致立即崩溃

    https github com jgilfelt android sqlite asset helper https github com jgilfelt android sqlite asset helper 我要从SQLiteOpe
  • Django:Whitenoise 在调试错误的情况下无法在生产中工作

    我有一个带有静态文件白噪声的 Django 应用程序 但是 当我使用 Google Lighthouse 测试该应用程序时 系统要求我为静态 js 和 css 文件启用文本压缩 我读了很多相关帖子但找不到答案 我也按照 Heroku 的指南
  • 可以轻易移动,但不可轻易复制

    是否可以创建类类型 即 普通移动构造 但不是普通复制构造 但仍然可复制构造 普通复制构造 但不是普通移动构造 但仍然可移动构造 可以简单地复制分配 但不能简单地移动分配 但仍然可以移动分配 可以简单地移动分配 但不能简单地复制分配 但仍然可
  • 驱蚊程序?

    不 我认真的 最近 我读到 当电脑的压电蜂鸣器以一定频率振动时 声音可以驱赶蚊子 真的吗 如何以编程方式访问 PC 蜂鸣器 而不是扬声器 最好使用 C 我不知道有没有蚊子 但我的头疼得要命 啊啊 using System Runtime I
  • 了解 nodetool cfstats 中的“键数”

    我是 Cassandra 新手 在本示例中 我使用具有 1 个 DC 和 5 个节点的集群以及复制因子为 3 的 NetworkTopologyStrategy Keyspace activityfeed Read Count 0 Read
  • 动态获取协议的字符串表示形式

    我正在寻找一种从协议类型动态获取协议名称的方法 而不必使用 objc协议声明中的属性 我知道这有效 func keyForProtocol aProtocol Protocol gt String return NSStringFromPr
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa