如图想实现左右布局的两个控件区域,带渐变色。
思路:checkbox一组,字一组,作为一个蓝色控件。蓝色俩控件一组,绿色一组,包含在一个flex布局的div下,space-between布局。
<div style="display: flex; justify-content: space-between;">
<div class="" style="display:flex;justify-content:left;">
<div class="" style="margin-right: 32px; margin-left: 32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
<div class="">
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_1" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_2" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_3" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_4" /></div>
</div>
<div class="">
<div class="row-count-title">140001 - Within 1 Month Amount</div>
<div class="row-count-title">140001 - Within 2 Month Amount</div>
<div class="row-count-title">140001 - Within 3 Month Amount</div>
<div class="row-count-title">140001 - Over 3 Month Amount</div>
</div>
</div>
</div>
<div class="" style="margin-right:32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
<div class="">
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_1" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_2" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_3" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_4" /></div>
</div>
<div class="">
<div class="row-count-title">210001 - Within 1 Month Amount</div>
<div class="row-count-title">210001 - Within 2 Month Amount</div>
<div class="row-count-title">210001 - Within 3 Month Amount</div>
<div class="row-count-title">210001 - Over 3 Month Amount</div>
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:right;">
<div class="" style="margin-right:32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(139,194,32,1));">
<div class="">
<div class="row-count"><div class="div-icon" style="background-color: #16c2c2;"></div>Payroll Dedcution</div>
<div class="row-count"><div class="div-icon" style="background-color: red;"></div>Refund</div>
<div class="row-count"><div class="div-icon" style="background-color: darkblue;"></div>In Communication</div>
<div class="row-count"><div class="div-icon" style="background-color: yellowgreen;"></div>Not Respond</div>
</div>
<div class="">
<div class="row-count-right" id="payrollDedcutionCount"></div>
<div class="row-count-right" id="refundCount"></div>
<div class="row-count-right" id="inCommunicationCount"></div>
<div class="row-count-right" id="noReplyCount"></div>
</div>
</div>
</div>
</div>
</div>
css代码:
.div-icon {
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 2px;
}
.row-count {
display: flex;
align-items: center;
width: 160px;
border: 1px solid transparent;
/*justify-content: flex-end;*/
font-size: 13px;
height: 23.5px;
}
.row-count-title {
display: flex;
align-items: center;
/*width: 160px;*/
border: 1px solid transparent;
/*margin-right: 32px;*/
height: 23.5px;
line-height: 23.5px;
font-size: 13px;
}
.row-count-right {
align-items: center;
/*width: 60px;*/
border: 1px solid transparent;
text-align: right;
height: 23.5px;
line-height: 23.5px;
}
放在HTML下的源码可直接保存网页用Chrome打开浏览:
<html>
<head>
<style type="text/css">
.div-icon {
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 2px;
}
.row-count {
display: flex;
align-items: center;
width: 160px;
border: 1px solid transparent;
/*justify-content: flex-end;*/
font-size: 13px;
height: 23.5px;
}
.row-count-title {
display: flex;
align-items: center;
/*width: 160px;*/
border: 1px solid transparent;
/*margin-right: 32px;*/
height: 23.5px;
line-height: 23.5px;
font-size: 13px;
}
.row-count-right {
align-items: center;
/*width: 60px;*/
border: 1px solid transparent;
text-align: right;
height: 23.5px;
line-height: 23.5px;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: space-between;">
<div class="" style="display:flex;justify-content:left;">
<div class="" style="margin-right: 32px; margin-left: 32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
<div class="">
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_1" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_2" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_3" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_140001_4" /></div>
</div>
<div class="">
<div class="row-count-title">140001 - Within 1 Month Amount</div>
<div class="row-count-title">140001 - Within 2 Month Amount</div>
<div class="row-count-title">140001 - Within 3 Month Amount</div>
<div class="row-count-title">140001 - Over 3 Month Amount</div>
</div>
</div>
</div>
<div class="" style="margin-right:32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(50,130,246,.8));">
<div class="">
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_1" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_2" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_3" /></div>
<div class="row-count-right"><input type="checkbox" class="checkbox_db" style="cursor:pointer" checked="checked" id="checkbox_210001_4" /></div>
</div>
<div class="">
<div class="row-count-title">210001 - Within 1 Month Amount</div>
<div class="row-count-title">210001 - Within 2 Month Amount</div>
<div class="row-count-title">210001 - Within 3 Month Amount</div>
<div class="row-count-title">210001 - Over 3 Month Amount</div>
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:right;">
<div class="" style="margin-right:32px;">
<div style="display: flex; justify-content: flex-end; margin: 2px 0 2px; border: 0 solid gray; border-radius: 0.25rem; padding: 0.5rem 2rem 0.5rem 1rem; background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(139,194,32,1));">
<div class="">
<div class="row-count"><div class="div-icon" style="background-color: #16c2c2;"></div>Payroll Dedcution</div>
<div class="row-count"><div class="div-icon" style="background-color: red;"></div>Refund</div>
<div class="row-count"><div class="div-icon" style="background-color: darkblue;"></div>In Communication</div>
<div class="row-count"><div class="div-icon" style="background-color: yellowgreen;"></div>Not Respond</div>
</div>
<div class="">
<div class="row-count-right" id="payrollDedcutionCount"></div>
<div class="row-count-right" id="refundCount"></div>
<div class="row-count-right" id="inCommunicationCount"></div>
<div class="row-count-right" id="noReplyCount"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图:
仅供学习参考,如有侵权联系我删除