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 布局,左侧有两个项目,右侧有一个项目 的相关文章

  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 如何知道 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