'다음'버튼이 제대로 정렬되는 데 문제가 있습니다.

Question

두 개의 섹션이 서로 나란히 있습니다. 하나는 최근 작업이고 다른 하나는 최근 블로그 게시물입니다. 각 섹션에는 3 개의 미리보기 이미지가 있으며 맨 아래에는 "다음"버튼이 있습니다 (타원은 .png 임). 나는 다른 요소에 영향을 미치지 않으면 서 각각의 다음 버튼을 올바른 위치에 놓는 데 어려움을 겪고있다.

이 섹션에서는 현재 어떤 문제가 발생 했으므로 모든 도움을 주시면 감사하겠습니다.

** 나는 또한 질문 할 수 있습니다 : <p><span> 요소에 적절한 패딩을 줄 수 없습니다 (20px 여야 함). 이것을 어떻게 성취합니까? 여기

내가 현재 가지고있는 작업은 다음과 같습니다

<div id="recent"> 
     <div id="recent-work"> 
      <p><span>Recent Work</span></p> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
      <div class="next"> 
       <a href="#"><img src="img/next.png" alt="Click for more information" /></a> 
      </div><!-- end next --> 
     </div><!-- end recent-work --> 

     <div class="divider"> 
      <img src="img/divider.png" alt="Section divider" /> 
     </div><!-- end divider --> 

     <div id="recent-blog"> 
      <p><span>Recent Blog</span></p> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
       <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
      <div class="next"> 
       <a href="#"><img src="img/next.png" alt="Click for more information" /></a> 
      </div><!-- end next --> 
     </div><!-- end recent-blog --> 
    </div><!-- end recent --> 

및

#recent { 
    border-top: 1px solid #202020; 
    padding-bottom: 40px; 
    padding-top: 40px; 
} 

#recent .divider { 
    display: block; 
    float: left; 
    margin-left: 20px; 
} 

#recent #recent-work { 
    display: block; 
    float: left; 
} 

#recent #recent-work p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    padding-bottom: 20px; 
    text-transform: uppercase; 
} 

#recent #recent-work a { 
    padding-bottom: 40px; 
    padding-right: 20px; 
} 

#recent #recent-work .next{ 
    float: right; 
} 

#recent #recent-blog { 
    display: block; 
    float: right; 
} 

#recent #recent-blog p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    padding-left: 20px; 
    text-transform: uppercase; 
} 

#recent #recent-blog a { 
    padding-bottom: 40px; 
    padding-left: 20px; 
} 

#recent #recent-blog .next{ 
    float: right; 
} 

Answer 1

당신이 시도 할 수

: 여기

내가처럼 보이도록 최종 설정을하고 싶은거야 position: absolute;을 사용하여 원하는대로 "다음 버튼"을 정확하게 얻을 수 있습니다. 이 시도 :

HTML

<div id="recent"> 
    <div id="recent-work"> 
     <p><span>Recent Work</span></p> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 

     <div class="next"> 
      <a href="#"><img src="img/next.png" alt="Click for more information" /></a> 
     </div><!-- end next --> 

    </div><!-- end recent-work --> 

    <div class="divider"> 
     <img src="img/divider.png" alt="Section divider" /> 
    </div><!-- end divider --> 

    <div id="recent-blog"> 
     <p><span>Recent Blog</span></p> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 
     <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a> 

     <div class="next"> 
      <a href="#"><img src="img/next.png" alt="Click for more information" /></a> 
     </div><!-- end next --> 

    </div><!-- end recent-blog --> 
</div><!-- end recent --> 

CSS

#recent { 
    border-top: 1px solid #202020; 
    padding-bottom: 40px; 
    padding-top: 40px; 
} 

#recent .divider { 
    display: block; 
    float: left; 
    margin-left: 20px; 
} 

#recent #recent-work { 
    display: block; 
    float: left; 
    position:relative; 
} 

#recent #recent-work p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    padding-bottom: 20px; 
    text-transform: uppercase; 
} 

#recent #recent-work a { 
    padding-bottom: 40px; 
    padding-right: 20px; 
} 

#recent #recent-blog { 
    display: block; 
    float: right; 
    position:relative; 
} 

#recent #recent-blog p span { 
    font-family: nevis-webfont; 
    font-size: 112.5%; 
    font-weight: normal; 
    letter-spacing: 1px; 
    padding-left: 20px; 
    text-transform: uppercase; 
} 

#recent #recent-blog a { 
    padding-bottom: 40px; 
    padding-left: 20px; 
} 

#recent .next{ 
position:absolute; 
bottom:-15px; 
right:0; 
} 

가 당신을 도울 수 있기를 바랍니다!