margin-right不起作用?

想把盒子模型里的四张图片从竖向变成田字格型的,但是不起作用
.pics {
border: solid 1px black;
margin-top: 60px;

}

.pics .item {
display: inline-block;
width: 540px;
height: 555px;
background: #9ACD32;
margin-bottom: 22px;
}

.pics .item:nth-child(2n+1){
margin-right: 22px;
}

.pics .item>img {
width: 100%;
}

.pics .item>.item_info {
width: 90%;
margin: auto;
margin-top: 40px;
color: #FFFFFF;
}

.pics .item>.item_info>h3 {
font-size: 24px;
line-height: 48px;
}

.pics .item>.item_info>a {
display: block;
width: 140px;
height: 38px;
text-align: center;
line-height: 38px;
background: #000;
margin-top: 20px;
}

1个回答

你可以试试将.pics的width限制下为1100px,然后把.pics .item:nth-child(2n+1){ margin-right: 22px;
}这个去掉,我用的html是这样

<div class="pics">
    <div class="item">
        <img src=""/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
    <div class="item">
        <img src="../pictues/bu.png"/>
    </div>
</div>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐