左右46分栏 ①
60%
40%
HTML代码:
<div class="aaa_div">
<div class="aaa_div_left">
<!-- 左边 ← 框架的内容开始 -->
<div class="card text-auto">
<div class="card-body">
<span style="font-size:80px; font-weight: bold; opacity: 0.1;">60%</span>
</div>
</div>
<!-- 左边 ← 框架的内容结束 -->
</div>
<div class="aaa_div_right">
<!-- 右边 → 框架的内容开始 -->
<div class="card text-auto">
<div class="card-body">
<span style="font-size:80px; font-weight: bold; opacity: 0.1;">40%</span>
</div>
</div>
<!-- 右边 → 框架的内容结束 -->
</div>
</div>
CSS代码:
<!-------------左右分栏 aaa 类---------------->
<style>
.aaa_div {
display: flex;
}
.aaa_div_left {
width: 60%;
margin-right: 15px; /* 右边距为5px */
}
.aaa_div_right {
width: 40%;
}
</style>
<!-------------左右分栏 aaa 类---------------->