css - 如何使用 flexbox 将一个盒子放在另一个盒子旁边?
问题描述
我正在尝试使用 flexbox 将两个 flex 容器彼此相邻放置,以此布局作为参考(我希望它像这里的第一行一样,左侧的部分图像在一个盒子内,另一个在对)
到目前为止,这是我对两个容器的代码:
.chaco-container {
border: $borde-textos;
background-color: #bda89c;
margin: 0;
padding: 1em;
width: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plan-container {
background-color: white;
border: $borde-textos;
width: 50%;
display: inline-flex;
}
解决方案
display: flex;
需要在父容器上应用。查看下面的示例代码段。
.flex-container {
display: flex;
}
.chaco-container {
width: 50%;
background-color: yellow;
}
.plan-container {
width: 50%;
background-color: skyblue;
}
<div class="flex-container">
<div class="chaco-container">...content</div>
<div class="plan-container">...content</div>
</div>
推荐阅读
- java - 构建应用程序失败说学习如何修复依赖项解析错误
- linux - 想通过 ansible 运行一个简单的 root 命令
- frame - H2o flow automl 临时样品架
- python-3.x - 如何以编程方式将另一个项目插入正文?
- javascript - 找不到一个或多个图标 vuejs 应用程序警告
- python - Multiprocessing.pool - 在可并行化函数中传递另一个变量
- npm - npm 错误!您可能没有权限以 Mac 上的当前用户身份访问此文件
- java - 如何使用 Apache Spark 读取来自公式的 excel 文件列数据
- python - 删除不同Json Lists python中的重复值
- java - 即使在声明了权限 read_contacts 后也得到了权限错误