균등 한 이미지 격자

나는이 사이트의 모든 곳을 다녀 왔지만 아직 적절한 해결책을 찾지 못했습니다.균등 한 이미지 격자

왼쪽에는 고정 메뉴 바 div가 있고 오른쪽에는 컨텐트 div가있는 사진 사이트를 만들고 있습니다. 사진 갤러리 페이지에는 유체 여백이있는 이미지 축소판 그림이 있어야하므로 축소판이 오른쪽 (내용) div에 균등하게 간격을 두게됩니다. 각 썸네일에서 애니메이션을 통해 네트 롤이 있습니다^

<body> 
<div id="wrapper"> 
<div id="left_column"> 
<div class="navigation"></div> 
</div> 
<div id="right_column"> 

    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 
... 
    <div id="thumb_container" class="grayscale"> 
    <a href="#"><div id="thumb_fx" ></div></a> 
    <img src="images/testimg.jpg" width="240" height="187" /> 
    </div> 

</div> 
</div> 
</body>

여기에 구조입니다.

그리고 CSS :

html { 
height: 100%; 
padding:0; 
margin:0; 
} 

body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

#wrapper { 
    float: left; 
    height: 100%; 
    width:100%; 
    padding:0; 
    margin:0; 
} 

#left_column { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    z-index:100; 
    width: 240px; 
    height: 100%; 
    overflow: hidden; 
    background-color:#ff0000; 
} 

#right_column { 
background-color:#cccccc; 
width:auto; 
height:100%; 
    margin-left: 240px; 
    position: absolute; 
} 

#thumb_container { 
    position: relative; 
    max-width:50%; 
    min-width:240px; 
    height:auto; 
    border-color:#000000; 
    display: inline-block; 
    margin: 2%; 
} 



#thumb_fx { 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 

    z-index: 100; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
    -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,1); 
} 

#thumb_fx:hover { 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -webkit-transition: opacity 0.5s linear; 
    transition: 0.5s; 
    -moz-transition: 0.5s; /* Firefox 4 */ 
} 



.grayscale img{ 
    max-width:100%; 
    min-width:50%; 
    height:auto; 
    position: relative; 
    border:none; 
    z-index: -1; 
    position: relative; 
}

지금까지 가장 좋은 방법은 이것이다 : http://jsfiddle.net/VLr45/1/하지만 마진이 방법 사업부가 다음 행으로 떨어지기 전에 너무 꽉 이동합니다. 그리고 나는 그들을 조정하는 방법을 이해하지 않습니다.

어떤 도움이 필요합니까? 당신이 맞는 상자의 수를 계산하면

출처

2013-04-11 user2264516

, 당신이 원하는 최소한의 마진 추가 : 픽셀

var boxMinMargin = 10; // 10px 

var columns = Math.floor(parent/(box + boxMinMargin));

http://jsfiddle.net/VLr45/14/

여백 %로

여백을

var boxMinMargin = box * 0.1; // 10% of box 

var columns = Math.floor(parent/(box + boxMinMargin));

,210

http://jsfiddle.net/VLr45/24/

당신이 CSS로 여백을 설정하려는 경우, 당신은 당신의 width을 설정할 수 있습니다 box 클래스

.box { 
    margin: 2%; 

    /* 

    or 

    margin-top: 2%; 
    margin-right: 3%; 
    margin-bottom: 4%; 
    margin-left: 5%;  

    */ 
}

http://jsfiddle.net/VLr45/17/

출처

2013-04-11 08:35:01 Johan

좋아 큰 감사합니다! 백분율을 마진으로 어떻게 얻을 수 있습니까? 이제 픽셀은 그렇지 않습니까? – user2264516

그냥 마진 스루 JS를 삭제하고 CSS에 추가하면 특정 화면 크기에서 오른쪽에 너무 많은 빈 공간이 생깁니다. http://jsfiddle.net/VLr45/16/ – user2264516

왼쪽 및/또는 오른쪽 여백 추가 여백이 js로 업데이트되기 때문에 CSS에 도움이되지 않습니다. 흠 ... CSS 마진 만 사용하면 축소판을 가운데에 맞출 때 양쪽에 일부 div가 필요할 수 있습니다. – user2264516

균등 한 이미지 격자

답변

관련 문제