Flexbox 布局,左侧有两个项目,右侧有一个项目

2024-04-25

我正在尝试使用 Flexbox 实现以下布局。

┌─┬─────┐
│A│     │
├─┤  C  │ 
│B│     │
└─┴─────┘

是否可以在不将 A 和 B 包装到包装器中的情况下这样做?


是的,这是可能的。请考虑到在此示例中主容器具有固定的宽度和高度。

#container{
  height: 200px;
  width: 300px;
  display: flex;
  flex-flow: column wrap;
}

#container, #A, #B, #C{
  box-sizing: border-box;
  border: 1px solid black;
}

#A{
  height: 50%;
  width: 100px;
}

#B{
  height: 50%;
  width: 100px;
}

#C{
  height: 100%;
  width: 200px;
}
<div id="container">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flexbox 布局,左侧有两个项目,右侧有一个项目 的相关文章

  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 使用 pkg:sjPlot 函数创建一个生成部分斜体单元格的数据框

    我正在尝试创建一个简单的数据表 其中 Coral taxon 列中的属名称为斜体 而 spp 列中的属名称为斜体 属名后面的部分不大写 我尝试使用 expression 函数对 Coral taxon 的每一行进行编码 但没有成功 sum
  • 如何防止 CFDocument 中的内容中间发生分页?

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in
  • 如何删除flexbox中所有换行行的左右边距(没有nth-child或js)

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • iOS 解决方法:在没有 CSS 属性的情况下平滑滚动 滚动行为:平滑?

    编辑 我找到了一个 jQuery 解决方案 https codepen io chriscoyier pen dpBMVP https codepen io chriscoyier pen dpBMVP这个确实可以在 iOS 上运行 我想
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 如何检测元素内容何时发生变化

    我正在寻找一种方法来监视元素内动态填充 无页面重新加载 内容 以便我可以将类添加到另一个元素 到目前为止我有这个 HTML div class message container div class messages error span
  • Django - 提交具有同一字段多个输入的表单

    预警 我对 Django 以及一般的 Web 开发 非常陌生 我使用 Django 托管一个基于 Web 的 UI 该 UI 将从简短的调查中获取用户输入 通过我用 Python 开发的一些分析来提供输入 然后在 UI 中呈现这些分析的可视
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 如何使用Python保存“完整的网页”而不仅仅是基本的html

    我正在使用以下代码来使用 Python 保存网页 import urllib import sys from bs4 import BeautifulSoup url http www vodafone de privat tarife r
  • 强制输入数字小数位

    我想强制

随机推荐

  • 如何知道 ASP.net 是哪个版本?

    通过查看ASP NET项目 我们如何知道它内置的是哪个版本的ASP NET 有人可以列出识别版本的不同方法吗 谢谢 您需要小心此处使用的方法 因为 ASP NET 下的 NET 框架的某些更新似乎会在以前的版本号下运行 例如 ASP NET
  • 重写后.htaccess图像不显示

    我有一个问题 URL 已被这样重写 RewriteEngine on RewriteCond REQUEST URI index php RewriteRule index php test 1 NC L 我的图像和 CSS 样式都没有被应
  • VB.NET Custom Control(自定义绘图)刷新问题

    我用两个项目创建了一个简单的解决方案 第一个项目 类库 包含一个名为 Container 的自定义控件 它用圆角绘制自身 第二个项目 Windows 窗体 是一个测试应用程序 如果我在第二个项目的主窗体中添加一个容器实例 它会很好地显示圆角
  • Rails,为什么连接返回具有非唯一值的数组?

    我使用 Rails 3 为例 但我相信 Rails 2 3 也是如此 假设 我有一个有很多位置的模型城市 我尝试寻找有地点的城市 我使用以下代码 City joins locations 但输出数组是 gt
  • 如何对arraylist进行一系列排序操作(多个排序条件)

    我有一个对象数组列表 我想在此列表上运行一系列排序操作 例如 我想首先按名称对它们进行排序 如果两个名称相同 则按 id 对它们进行排序 我怎样才能实现它 这是我的代码 Comparator
  • MacVim 中的 Inconsolata 斜体

    我正在尝试使用 Inconsolata 作为 MacVim 中的字体 但我似乎找不到斜体版本 我使用的是日晒配色方案 它应该使注释斜体化 并且它适用于字体书中具有斜体或倾斜版本的字体 有没有办法以某种方式 制作 斜体版本 是不是有什么文件我
  • Python win32com - 自动化 Word - 如何替换文本框中的文本?

    我正在尝试使用 Python 自动化 Word 来替换 Word 文档中的文本 如果重要的话 我使用的是 word 2003 和 Python 2 4 下面我的替换方法的第一部分适用于除文本框中的文本之外的所有内容 文本只是没有被选择 我注
  • 将数组映射到 Symfony2/Doctrine2 中的实体

    我正在使用 DoctrineFixtures 包在开发过程中创建示例实体 在我的 ORM 装置 load 方法中 我将数据定义为关联数组并在循环中创建实体对象
  • 用于匹配编号大于的类的 CSS 选择器

    我有一个使用 Sencha Touch 2 开发的移动混合应用程序 需要根据其运行的 iOS 版本进行一些自定义 我的 Sass 样式表中曾经有以下选择器 x ios 7 put here iOS7 customizations 现在 iO
  • 换行符 unicode 字符

    我想要一个可用于表示新行的 Unicode 字符 我以前见过它 但通过我尝试过的任何谷歌搜索都找不到它 它看起来像这样 lt 有几种可能性 选择也可能取决于字体 因为并非所有字体都适用于所有字体 并且其中一些具有相当不同的形状 并且有些在小
  • 类型错误:无法读取 null 的属性(读取“useRef”)

    我正在使用 Next js TypeScript sanity 和 tailwindcss 我尝试使用react hook form 但收到错误 我试过了 改变Post函数到箭头函数 改变Post函数到 const 函数 改变IFormIn
  • Gradle fileTree 排除除某些目录之外的所有目录

    我正在使用 fileTree 实用程序来获取文件列表 但需要排除除列表中选定的几个目录之外的所有目录 我的目录结构 node modules react native react third party package another pa
  • 如何将颜色条添加到已有的绘图图形中?

    我有以下图表 其数据 位置和颜色值 来自外部源 import plotly graph objs as go from plotly offline import init notebook mode iplot data go Scatt
  • 如何读取箭头镶木地板键值元数据?

    当我在 R 和 Python 中保存 parquet 文件 使用 pyarrow 时 我得到一个保存在元数据中的箭头模式字符串 如何读取元数据 是Flatbuffer编码的数据吗 模式的定义在哪里 它没有在箭头文档网站上列出 元数据是一个键
  • 错误:“主机标识符中存在双冒号”

    我正在尝试连接到我在 MLab 托管的数据库 我正在使用 StrongLoop API 我已将托管数据库的配置信息放入 datasources json 和 config json 文件中 但每当我使用以下命令运行目录时npm start
  • 是否存在用于将 C++ 代码移植到 64 位的自动转换工具?

    我正在研究将大量 gt 10M 行 C 代码移植到 64 位的方法 我已经研究了静态代码分析器和编译器标志 现在正在研究可以进行常见的重复更改的宏或其他工具 我写了一些正则表达式来看看它们在实践中的效果如何 正如预测的那样 它们非常有效 也
  • 如何在更改屏幕方向android时保留回收器视图的选定项目?

    我想在屏幕方向改变时保留 RecyclerView 所选项目的状态 但每当我更改方向时 所选项目不会保留其状态 所以我保存所选项目的位置和方向变化onResume 我获取了位置 并通过使用 RecyclerView 的 getChildAt
  • 使用变量作为关键字来分配关键字参数的最 Pythonic 方式?

    What is 最Pythonic的方式解决以下问题 从交互式 shell 中 gt gt gt def f a False if a return a was True return a was False gt gt gt f a Tr
  • 维梅奥上传。无法获取响应中的complete_uri字段

    我在上传到 vimeo 时花了很多功夫 我已经提出了门票请求 我已经上传文件了 我已经检查了文件是否已上传 我需要使用我应该从票证中获得的complete uri 响应来运行DELETE 方法 但是 我没有从票证响应中收到任何complet
  • Flexbox 布局,左侧有两个项目,右侧有一个项目

    我正在尝试使用 Flexbox 实现以下布局 A C B 是否可以在不将 A 和 B 包装到包装器中的情况下这样做 是的 这是可能的 请考虑到在此示例中主容器具有固定的宽度和高度 container height 200px width 3