在懸停圖像邊框寬度大於其他列邊框寬度時

Question

我想要像響應式布局中的圖像

我已經嘗試過，但是它不能正常工作，因為當我增加一個元素的邊框時，增加的大小會影響以下圖像，並且網格布局不再符合設計要求。

 .list_item{ margin: 0px 0px; padding: 0px 0px; list-style: none; } .list_item li{ margin-bottom: 10px; padding-left: 14px; padding-right: 14px; } .list_item li{ float: left; margin-bottom: 20px; margin-top: 7px; padding-left: 20px; padding-right: 20px; width: 33.3333%; } .list_item > li img { height: 137px; width: 259px; } .list_item li:hover .list_img{ border: 5px solid red; height: 147px; width: 269px; } .list_item > li .list_img{ border: 3px solid red; height: 143px; width: 265px; background:blue; } 

 <ul class="list_item"> <li> <div class="list_img"> <img src="images/1.jpg"> </div> </li> <li class="list_select"> <div class="list_img"> <img src="images/2.jpg"> </div> </li> <li> <div class="list_img"> <img src="images/2.jpg"> </div> </li> </ul> 

Answer 1

使用box-sizing: border-box; 在可能具有邊框但您希望將其計算為width一部分的元素上，而不是添加到該元素上

http://www.paulirish.com/2012/box-sizing-border-box-ftw/ （舊但金色）

.list_item > li .list_img {
    box-sizing: border-box;
    border: 3px solid #707070;
    height: 143px;
    width: 265px;
}