css - html 布局
本文介绍了css - html 布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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>
解决方案
如果是为了循环生成元素，类名要一样的话，我觉得可以用:nth-child()[IE9+]这样的选择器
.content .child-con:nth-child(odd){ padding-right: 10px;}
.content .child-con:nth-child(even){ padding-left: 10px;}如果理解错了意思，请无视
这篇关于css - html 布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
