div 안에 자리 맞추기

Question

오랜 시간이 지난 후에 나는 처음으로 html 연습을 마치기까지 한 마디 떨어져 있으며,이 멋진 커뮤니티의 지원 없이는 그렇게 할 수 없었습니다.

내 유일한 문제는 내 소셜 미디어 div 인 cluster-fluster를 피하는 것입니다. 나는 크기가 더 작은 slighlty 인 링크가 필요하고 imgs (ofc 공간 포함) 옆에 링크가 있어야하며 지금은 조금 떨어져 있습니다.

또한 각각의 img가있는 뉴스 레터 부분은 사회적 요소에 집착하고 숨쉴 공간을주고 싶지 않습니다.

모든 아이디어가 깊이 개진 될 것입니다. 빌며

CSS 코드 :

#contactUs{ 
position: absolute; 
margin: 20px 0 0 700px; 
} 


    #social p{ 
color: #404040; 
font-family: 'Quattrocento Sans', sans-serif; 
font-size: 14px; 
top: 5px; 
padding: 0 0 0 20px; 
line-height: 23px 
    } 

#social img{ 
float: left; 
} 

#social{ 
position: absolute; 
top: 15px; 
} 

#news{ 
color: #404040; 
font-family: 'Quattrocento Sans', sans-serif; 
font-size: 14px; 
bottom: 10px; 
} 

그리고 HTML :

<div id="contactUs"> 
     <h4 id="title4">GET IN TOUCH WITH US</h4> 
     <img src="imgs/social.png"> 
     <div id="social"> 
      <p><a href="#">Facebook</a></p> 
      <p><a href="#">Twitter</a></p> 
      <p><a href="#">Google+</a></p> 
     </div> 

     <h4 id="news">NEWSLETTER SIGNUP</h4> 
     <img src="imgs/email.png"> 
    </div> 

그것은이 DIV 지금 그들이 정상적으로 행동하는 오른쪽이 다른 것을 주목할 필요가있다. 또한 %를 사용할 수 없습니다.

Answer 1

원래 코드에 문제가 많아서 새로운 코드를 만드는 것이 더 쉬워졌습니다.

내가 본 바로는 ID 속성을 잘못 사용했다는 것입니다. ID 속성은 고유해야하므로 페이지에서 둘 이상의 객체에 동일한 ID를 부여 할 수 없습니다. 여러 객체를 그룹화하려면 class 속성을 대신 사용하십시오. CSS에서 ID는 #IDName으로 표시되지만 클래스는 .ClassName으로 표시됩니다. 초보자라면 클래스 대신 독점적으로 작업하는 것이 더 쉽지만 페이지가 더 커지고 복잡해지면 다른 클래스보다 더 유용 할 수 있습니다.

이제 실제 코드에 추가하십시오. 가능한 한 최선을 다해 제공된 스크린 샷의 레이아웃을 다시 만들려고했지만 글꼴 색상과 같은 일부 스타일이 누락되었습니다. 나는 너 자신을 고칠 수 있다고 가정하고, 그래서 나는 더 중요한 것들을 설명하는데 집중할 수있다.

<footer> 
    <div class="footColumn"> 
     <h4>24 HOUR CUSTOMER SERVICE</h4> 
     <div class="inner"> 
      <img src="imgs/icon-phone.png" class="left"> 
      <p class="offset">512-943-1069</p> 
      <p class="offset">512-943-1068</p> 
     </div> 
     <div class="inner"> 
      <img src="imgs/icon-email.png" class="left"> 
      <p class="offset"><a href="#">info@WTPcom</a></p> 
     </div> 
     <div class="inner"> 
      <img src="imgs/icon-address.png" class="left"> 
      <p class="offset">1341 Oakmound Drive</p> 
      <p class="offset">Chicago, IL 60609</p> 
     </div> 
    </div> 
    <div class="footColumn"> 
     <h4>RECENT TWEETS</h4> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <p><a href="#">- 1 day ago</a></p> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     <p><a href="#">- 2 days ago</a></p> 
    </div> 
    <div class="footColumn"> 
     <h4>GET IN TOUCH WITH US</h4> 
     <img src="imgs/social.png" class="left"> 
     <p class="offset"><a href="#">Facebook</a></p> 
     <p class="offset"><a href="#">Twitter</a></p> 
     <p class="offset"><a href="#">Google+</a></p> 
     <h4 class="news">NEWSLETTER SIGNUP</h4> 
     <img src="imgs/email.png"> 
    </div> 
</footer> 

CSS : 여기에서

footer{ 
    font-size:0; 
} 
.footColumn{ 
    display:inline-block; 
    width:33%; 
    font-size:12px; 
    vertical-align:top; 
} 
.footColumn h4{ 
    font-size:14px; 
} 
.offset{ 
    padding:0px 0px 0px 30px; 
    margin:0px 0px 10px; 
} 
.inner{ 
    padding:10px 0; 
} 
.left{ 
    float:left; 
} 

Here's a Fiddle

, 당신은 작은 스타일을 손질,하지만 당신은 어떤 질문이 있으면 알려 주시기 할 수 있어야한다.