rorowhy
rorowhy
采纳率0%
2019-04-15 12:35 阅读 1.0k

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条回答 默认 最新

  • z3365 z3365 2019-04-15 20:10

    你可以试试将.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>
    
    点赞 评论 复制链接分享

相关推荐