여러 div를 컨테이너의 중앙에 유지합니다. 또한 바닥 글이 중간에 붙어 있습니다

Question

나는이 질문이 여기 몇 번 자른 것을 알고 있지만 내 구체적인 문제를 해결할 수없는 것 같습니다. 나는 현재 사진 웹 사이트를 구축하고 있지만, 오랜 시간이 걸렸지 만 오케이와 함께오고 있습니다. 나는 보통 답을 찾으면서 너무 많은 질문을하지는 않지만,이 질문은 나를 미치게 만든다. 나는 아주 새롭다 웹 건물 및 고려 완전한 초심자.

갤러리에 링크되는 주요 '사진'페이지가 있습니다.이 페이지에서 멋진 CSS3 효과가있는 큰 썸네일을 갖습니다.

이 큰 썸네일을 포함 할 6 개 div를 만들었습니다. 화면 크기가 축소되었을 때 위치가 바뀌거나 크기가 작아 진 디스플레이에 표시됩니다. 이제는 img 컨테이너가 실제로 더 작은 장치에 표시되지만 내가 달성하기 위해 애 쓰고있는 것은 화면 중앙에 6 개의 div를 유지하는 것입니다.

내가 시도한 마지막 해결책은 "display : inline-block"이었습니다. 또한 포함 된 div의 높이가 콘텐츠로 확장되지 않는 것 같습니다. 여기에 약간 빠진 것 같아서 어떤 제안이나 도움을 주셔서 감사합니다.

아직 footer 문제를 깊이 들여다 보지는 않았지만 그에 대한 도움도 될 것입니다. 문제는 그것이 페이지의 맨 아래에 위치한다는 것입니다. (나는 끈적 끈적한 것이 었습니다.)하지만 페이지가 스크롤 할 수있는 충분한 콘텐츠를 가지고 있기 때문에 이제는 페이지가 그대로있게됩니다.

웹 사이트에 대한 다른 도움말 및 의견은 대단히 환영합니다. o) 사전에 많은 감사의 말씀 !!

질문 russfrancis.co.uk/photo

참조하십시오의 페이지에 다음과 같은 마크 업 및 CSS :

사진 마크 업 :

<div class="photomain"> 
    <div class="containerwrapper"> 
    <div class="photoimgcontainer"> 
     <div class="view view-second"> 
     <img src="images/photo/tn/asialg.jpg" /> 
     <div class="mask"></div> 
     <div class="content"> 
     <h2>Asia</h2> 
     <p>In 2008 I spent 6 months backpacking around Asia.</p> 
     <a href="asia.htm" class="info">View The Galleries</a> 
     </div> <!-- Content Close --> 
     </div> <!-- View-second close --> 
    </div> <!-- Img Container Close --> 
     <div class="photoimgcontainer"> 
     </div> 
     <div class="photoimgcontainer"> 
     </div> 
     <div class="photoimgcontainer"> 
     </div> 
     <div class="photoimgcontainer"> 
     </div> 
     <div class="photoimgcontainer"> 
     </div> 
    </div> <!-- Container Wrapper Close --> 
    </div> 

CSS :

.photomain{ 
width: 90%; 
height:auto; 
margin: 130px auto 0;} 

.containerwrapper{ 
display:inline-block; 
height:auto;} 

.photoimgcontainer{ 
background-color:rgba(19,19,19,1); 
width: 535px; 
height: 360px; 
float:left; 
margin: 5px 5px;} 

바닥 글 마크 업 :

,451,515,

<footer> 
    <div class="footdiv"> 
    <p align="center">Follow Me</p> 
    <div class="footimg"> 
    <a href="https://www.facebook.com/RussFrancisPhotography" target="_blank"><img src="images/facebook.png" width="40" height="40" border="0" alt="RFP Facebook Page"></a> 
    <a href="http://www.flickr.com/photos/russfrancisphotography/" target="_blank"><img src="images/flickr.png" width="40" height="40" border="0" alt="Russ Francis Flickr"></a> 
    <a href="http://vimeo.com/lucidskies" target="_blank"><img src="images/vimeo.png" width="40" height="40" border="0" alt="Vimeo - Lucid Skies"></a> 
    <a href="https://twitter.com/R_F_Photo" target="_blank"><img src="images/twitter.png" width="40" height="40" border="0" alt="Russ Francis - Twitter"></a> 
    </div> 
</div> 
<p class="pleft">&copy; Russ Francis Photography 2012</p> 
<div class="pright"><a href="#">Contact Me</a></div> 
</footer> 

바닥 글 CSS :

footer { 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
color:#FFF; 
position:absolute; 
left: 0; 
bottom: 0; 
height: 115px; 
width: 100%;} 

.footdiv p { 
padding-bottom: 10px; 
border-bottom: 1px solid rgba(153,0,0,1);} 

.footdiv { 
margin: 0 auto 0; 
width:200px; 
height:60px;} 

.footimg { 
padding-left: 14px;} 

.pleft { 
padding-left: 10px; 
color:#999; 
font-size:12px; 
float:left;} 

.pright { 
font-size:15px; 
padding-right: 20px; 
float:right;} 

.pright a { 
color:#FFF; 
text-decoration:none;} 

Answer 1

바닥 글에서 bottom: 0; 제거는 하단

footer { 
    color: #FFFFFF; 
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; 
    height: 115px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

및

.containerwrapper { 

    height: auto; 
    margin: 0 auto; 
    max-width: 1100px; 
} 

해야하며 단지 바로 <footer >

전에 <div style="clear:both;"></div>를 추가합니다

출력 사이트에

Answer 2

여기에서 CSS를 사용하여 시도

견인 이미지

이 있다는 그 때문에의 흰색 선을 고려 해달라고 당신을 위해 작동하는지 확인 : http://dabblet.com/gist/3739171가.