為什么我給content 加了 margin-right:-32px 沒有起作用呢，怎么解決
//清除浮動(dòng)
.clearfix{
&:after{
content:"";
display: block;
clear: both;
}
zoom:1;
}
.fl(@fl:left){
float:@fl;
}
.box{
@box_w:616px;
width:@box_w;
background-color: green;
margin-right:-32px;
.item{
@h:164px;
@w:130px;
@mr:32px;
.fl();
color:black;
height: @h;
width:@w;
text-align: center;
margin-right: @mr;
background-color: blue;
}
2019-08-14
所示圖片
2019-08-14
因?yàn)槟?margin-right: -32px的元素沒有父元素
所有代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
??<meta charset="UTF-8">
??<meta name="viewport" content="width=device-width, initial-scale=1.0">
??<meta http-equiv="X-UA-Compatible" content="ie=edge">
??<title>Document</title>
??<style>
????.main {
??????width: 616px;
??????height: 300px;
??????background-color: red;
????}
????.item-box {
??????/* 通過margin-right 變大item-box寬度，但必須有父元素 */
??????margin-right: -32px;
??????height: 200px;
??????background-color: blue;
????}
????.item {
??????width: 130px;
??????height: 100px;
??????float: left;
??????margin-right: 32px;
??????background-color: green;
????}
??</style>
</head>
<body>
??<div class="main">
????<div class="item-box">
??????<div class="item"></div>
??????<div class="item"></div>
??????<div class="item"></div>
??????<div class="item"></div>
????</div>
??</div>
</body>
</html>