极客观点
项目管理
HarmonyOS
html 布局 左右相同的两块，中间有一条线，设置的padding-left 和 padding-right 怎么让左右两块的属性完全相同也能出现中间那条线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
.content{
width: 100%;
}
.child-con{
float: left;
width: 50%;
background:white;
}
.test{
height: 300px;
margin-top:10px;
background: red;
}
.clearfix:after{
content: "";
clear: both;
overflow: hidden;
visibility: hidden;
height: 0;
display: block;
}
.hhh{
width: 100%;
background: blue;
height: 100%;
}
.left-gap{
padding-right: 4px;
}
.right-gap{
padding-left: 4px;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="child-con" >
<div class="test left-gap">
<div class="hhh">
</div>
</div>
</div>
<div class="child-con" >
<div class="test right-gap">
<div class="hhh">
</div>
</div>
</div>
<div class="child-con " >
<div class="test left-gap">
<div class="hhh">
</div>
</div>
</div>
<div class="child-con" >
<div class="test right-gap">
<div class="hhh">
</div>
</div>
</div>
<div class="child-con" >
<div class="test left-gap">
<div class="hhh">
</div>
</div>
</div>
<div class="child-con" >
<div class="test right-gap">
<div class="hhh">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html5
如果是为了循环生成元素，类名要一样的话，我觉得可以用:nth-child()[IE9+]这样的选择器
如果理解错了意思，请无视