<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分割</title>
<style>
.wrap{
background-color:red;
width:80%;
height:20px;
}
.split1{
width:2px;
background-color:white;
height:20px;
margin-left:33%;
float:left;
}
.split2{
width:2px;
background-color:white;
height:20px;
margin-left:33%;
float:left;
}
.my-wrap {
width:80%;
height:20px;
clear: both;
}
.wrap1 {
float:left;
width: 10%;
background-color:lightyellow;
}
.wrap2 {
float:left;
width: 20%;
background-color:lightgreen;
}
.wrap3 {
float:left;
width: 70%;
background-color:lightblue;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="split1"></div>
<div class="split2"></div>
</div>
<p></p>
<div class="my-wrap">
<div class="wrap1">a</div>
<div class="wrap2">b</div>
<div class="wrap3">c</div>
</div>
</body>
<script>
</script>
</html>
柱条分段展示(阶梯电价)
最新推荐文章于 2023-10-10 15:48:42 发布