html - 同样扩大2个div的大小
问题描述
我正在为 html 报告制作模板。我对这个大小有疑问<div class="rule"></div>
。我有两个这样的div。然后我希望大小相同,彼此相邻显示,并且这个 div 的 2 个应该占用<div class="right_container"></div>
. 最终效果应该类似这样:
我试过这个,但在较小的分辨率屏幕上,第二条规则 div 转到下一行。
.rule{
height:300px;
width: 48%;
background-color: rgb(55,55,55);
border-radius:10px 10px 10px 10px;
display: inline-block;
margin-right: 15px;
margin-top: 15px;
}
是否有任何 CSS 属性可以实现这一目标?
body {
background-color: rgb(45, 45, 45);
}
.container {
width: 100%;
height: 200px;
}
.left_container {
height: 1500px;
width: 500px;
float: left;
background-color: rgb(55, 55, 55);
border-radius: 10px 10px 10px 10px;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 15px;
margin-left: 15px;
}
.right_container {
width: auto;
overflow: hidden;
background-color: rgb(255, 255, 255);
}
.right_container_plot {
width: auto;
height: 200px;
background-color: rgb(55, 55, 55);
overflow: hidden;
margin-top: 15px;
margin-left: 15px;
border-radius: 10px 10px 10px 10px;
}
.rule {
height: 300px;
background-color: rgb(55, 55, 55);
border-radius: 10px 10px 10px 10px;
display: inline-block;
margin-right: 15px;
margin-top: 15px;
}
.label {
background-color: rgb(70, 70, 70);
font: 20pt "MS Shell Dlg 2";
color: rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
<div class="container">
<div class="left_container">
<p class="label">Transactions</p>
</div>
<div class="right_container">
<div class="rule">
<p class="label">Buy rule</p>
</div>
<div class="rule">
<p class="label">Sell rule</p>
</div>
</div>
<div class="right_container_plot">
<p class="label">Plot</p>
</div>
</div>
解决方案
只需添加display: flex;
到right_container
课堂。
弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。
有关 CSS 显示属性的更多信息,请参见以下链接: https ://www.w3schools.com/cssref/pr_class_display.asp
推荐阅读
- javascript - 我应该如何使用 node-postgres 客户端构建 node.js 服务器的数据层?
- javascript - 有没有办法在Javascript中替换字符串中的某种格式?
- sql - 如何合并 SQL Select 查询?
- python - 拆分字符串(区分大小写)
- python - 如何获取类实例变量,python
- python-3.x - Django作者表单未保存到数据库
- mysql - 即使我们没有数据,如何选择当年每个月的数据总和
- javascript - JavaScript中有没有办法检测文件是否可以放在使用的设备上?
- c# - C# Winform 文本框数值
- javascript - 每 n 个字符拆分一个多行字符串