如何让上半部分背景为白色，下半部分背景为灰色？灰色部分左右上下都撑开？
如何灰色高度撑满？
2
548<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style type="text/css" media="screen">
*,ul,li,p,p,span{
padding:0;
margin:0;
}
html,body{
height:100%;
}
.containers{
}
.wrap{
padding:0 1.6rem 0 1.6rem;
}
.ongoing{
height:16.6rem;
border:0.1rem rgb(0, 0,0 ,0.11) solid;
}
ul li{
padding:0.8rem 0 ;
}
ul li p{
display: inline-block;
font-size:1.2rem;
color:rgba(0,0,0,0.54);
padding-right: 1.2rem;
}
ul>li:nth-child(1)>p{
font-size: 1.4rem;
}
ul>li:nth-child(1){
padding:2.4rem 0 0.8rem 0;
}
.ongoing .loan p:nth-child(3){
color: rgba( 255 ,41 ,41,0.69);
}
.ongoing .repay p:nth-child(2),.fnished .repay p:nth-child(2){
color: rgba( 255 ,41 ,41,0.69);
}
.ongoing .num p:nth-child(3),.finished .num p:nth-child(3){
color: rgba( 33, 150 ,245,1);
}
.finished{
height:100%;
background: rgb(242, 242, 242);
}
</style>
<body>
<p class="containers">
<p class="wrap">
<p class="ongoing">
<ul>
<li class="loan">
<p>借款金额</p>
<p>5000</p>
<p>进行中</p>
</li>
<li class="loandate">
<p>借款日</p>
<p>2016-08-05</p>
</li>
<li class="deadline">
<p>还款期限</p>
<p>５个月</p>
</li>
<li class="repay">
<p>已还</p>
<p>1/5个月</p>
</li>
<li class="num">
<p>借款编号</p>
<p >5000</p>
<p>《借款协议》</p>
</li>
</ul>
</p>
<p class="finished">
<ul>
<li class="loan">
<p>借款金额</p>
<p>5000</p>
<p>进行中</p>
</li>
<li class="loandate">
<p>借款日</p>
<p>2016-08-05</p>
</li>
<li class="deadline">
<p>还款期限</p>
<p>５个月</p>
</li>
<li class="repay">
<p>已还</p>
<p>1/5个月</p>
</li>
<li class="num">
<p>借款编号</p>
<p >5000</p>
<p>《借款协议》</p>
</li>
</ul>
</p>
</p>
</p>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
用
flexbox的方式，設置flex: 1可以讓其自動平均分配高度jsFiddle
把wrap删了，ongoing/finished 设置background-color， ul 设置padding-left为50px。
看 https://fiddle.jshell.net/6e4sufrc/1/