왼쪽으로 플로트를 사용하여 호버상에서 이미지 위치가 변경됨

플로트가있는 이미지 갤러리를 만들었으므로 모든 것이 잘 작동하지만 이미지의 두 번째 행에 도달하면 문제가 발생합니다. 첫 번째 행에서 이미지 위에 마우스를 가져갈 때마다 두 번째 행 위치의 이미지가 혼란스러워집니다.왼쪽으로 플로트를 사용하여 호버상에서 이미지 위치가 변경됨

여기에 codepen이 있습니다. 는 모든 이미지 위로 가져 가면 시도하고 엉망이되는 방식 번째 행 이미지 참조 .. (내 최근 예술은 codepen하지만 당신은 이미지 위에 마우스를 올려 때마다 아이디어를 얻을에서보다 더 나은 방법 모양) http://codepen.io/anon/pen/ZpGrVA

<html> 
<body style="background-color: rgb(242, 242, 242);"> 
<style> 

.middlegallery{ 

    top:250px; 
    position: absolute; 
} 
.mainpanel{ 
    left: 50%; 
    right:50%; 
    display:block; 
    padding: 15px; 
    /*top: 125px;*/ 
    font-size: 16px; 
    background-color: #f5f5f5; 
    border: 1px solid #d8d8d8; 
    line-height: 1.5; 
    border-radius: 5px 3px 0 0; 
    position: relative; 
    font-family: Helvetica, Arial, sans-serif; 
} 

.gallery-image{ 
margin:5px; 
border: 1px solid #ccc; 
zoom: 1; 
float:left; 
cursor:pointer; 
position:relative; 
} 
img:hover{ 
    border:1px solid #777; 
} 
img{ 

} 
.middlewrapper{ 
    margin:0 auto; 
    width:95%; 
    padding-top: 125px; 
} 



</style> 
<div class="middlewrapper"> 
<div class="col-sm-6"> 
<div class="mainpanel"><h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5></div> 
    </div> 
    <div class="middlegallery"> 
    <div class="gallery-image"> 
<img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
<div class="gallery-image"> 
    <img src="http://placehold.it/240x220"> 
</div> 
</div> 
</div>

출처

2016-09-08 flex_

당신은 부트 스트랩을 사용하는 이유는 실제로 레이아웃 그리드 일명, 그것을 사용하는 대신이 부동의 물건을위한 주요 이유 중 하나를 활용? –

@ChrisW. 예를 들어 줄 수 있습니까? –

물론 "google"부트 스트랩 그리드 튜토리얼 "또는"부트 스트랩 이미지 갤러리 "등 많은 예제 amigo가 있습니다. :) –

이 img에 대한 transparent 경계를 사용하여 이러한 목적을 위해 그림자를 사용하여 당신은 당신의 hover 테두리 공백을 제거

img:hover{ 
     border:1px solid #777; 
    } 
    img{ 
     border: 1px solid transparent; 
    }

A가 img에 display: block 또는 vertical-align: top를 추가 suggestion- 문제를 일으키는 IT-에게 해결 이미지 아래의 인라인 요소의 특성

의견을 보내주십시오. 감사!

* { 
 
    box-sizing: border-box; 
 
} 
 
.middlegallery { 
 
    top: 250px; 
 
    position: absolute; 
 
} 
 
.mainpanel { 
 
    left: 50%; 
 
    right: 50%; 
 
    display: block; 
 
    padding: 15px; 
 
    /*top: 125px;*/ 
 
    font-size: 16px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #d8d8d8; 
 
    line-height: 1.5; 
 
    border-radius: 5px 3px 0 0; 
 
    position: relative; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
} 
 
.gallery-image { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    zoom: 1; 
 
    float: left; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
img:hover { 
 
    border: 1px solid #777; 
 
} 
 
img { 
 
    border: 1px solid transparent; 
 
    display: block; 
 
} 
 
.middlewrapper { 
 
    margin: 0 auto; 
 
    width: 95%; 
 
    padding-top: 125px; 
 
}

<html> 
 

 
<body style="background-color: rgb(242, 242, 242);"> 
 
    <div class="middlewrapper"> 
 
    <div class="col-sm-6"> 
 
     <div class="mainpanel"> 
 
     <h5 style="font-family: Verdana, serif; text-align: left; position: relative; top: 3px;"><i class="fa fa-picture-o" aria-hidden="true"></i> Recent arts</h5> 
 
     </div> 
 
    </div> 
 
    <div class="middlegallery"> 
 

 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
     <div class="gallery-image"> 
 
     <img src="http://placehold.it/240x220"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

출처

2016-09-08 15:11:51 kukkuz

정말 고맙습니다. display : block으로 매우 잘 작동했습니다. –

여기에서 일어나고있는 것은 호버 위에서 보더가 추가되면 div가 커지고 다른 div가 푸시됩니다. 이미지에 테두리를 추가하기 만하면됩니다.

img{ 
border: 1px solid transparent; 
}

출처

2016-09-08 15:11:25 Vcasso

나의 나쁜 나는 그것을 알아야한다 : /. –

호버에 당신이 당신의 요소가 가장 긴 요소에 따라 2 개 픽셀 큰, 2 행의 위치를 그 자체를 가져 의미 테두리를 추가하기 때문에.

img:hover{ 
    box-shadow: 0 0 0 1px #777; 
}

출처

2016-09-08 15:11:32

여러분 모두에게 좋은 답변을 해주셔서 감사합니다 :) –

왼쪽으로 플로트를 사용하여 호버상에서 이미지 위치가 변경됨

답변

관련 문제