twitter 부트 스트랩 span4 클래스로 3 개의 div를 중첩하는 내 웹 페이지에 꼬리말이 있습니다. 나는 'Contact Us'헤더가 왼쪽에서 '오른쪽'과 동일한 거리에 있고 '중간에'유용한 링크 '가 왼쪽 아래에 각각의 div에 대한 모든 텍스트가 왼쪽 아래에 정당화되도록하고 싶습니다. 바닥 글에 divs를 균등하게 배포합니다.
당신은 오른쪽 가장자리에서입니다 연락처 우리와 함께 연결보다 왼쪽 가장자리에 가까운 것을 볼 수 있습니다
이것은 내가 지금까지있는 것입니다.
그러나 아래의 목록 항목은 요소와 왼쪽 정렬하지 않는 헤더에 대해 텍스트 정렬을 사용해 보았습니다.
다음은 머리글에 text-align을 사용하여 어떤 모습인지 보여주는 이미지입니다. 당신은 내가 원하는대로가 배치되어 있음을 알 수 있지만 아래의 내용은 그들과 함께 왼쪽 정렬되지 않은 : 여기
바닥 글에 대한 HTML입니다 : 여기
<footer class="footer">
<div class="row-fluid">
<div class="span12">
<div class="span4" id="leftFooter">
<h5><b>Contact Us</b></h5>
<ul>
<li><a href="#">Tel:</a></li>
<li><a href="#">E-mail: [email protected]</a></li>
</ul>
</div>
<div class="span4" id="middleFooter">
<div class="middle"><h5><b>Useful Links</b></h5>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Copyright Information</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul> </div>
</div>
<div class="span4" id="rightFooter">
<h5><b>Connect With Us</b></h5>
<ul>
<li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li>
<li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li>
</ul>
</div>
</div>
</div>
</footer>
에 대한 CSS입니다 바닥 글 :
.footer {
padding: 10px;
position: relative;
color: #ccc2a0;
background-color: #333333;
height: 150px;
clear:both;
padding-top:20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftFooter {
color: #ccc2a0;
padding-left: 50px;
}
#middleFooter {
color: #ccc2a0;
/* text-align: center; */
}
#rightFooter {
padding-right: 50px;
/*text-align: right; */
color: #ccc2a0;
}
#rightFooter li {
padding-top: 5px;
}
.follow { line-height: 19px; }
아무도 도와 줄 수 있습니까? 감사
편집 : 가 여기에 오른쪽 바닥 글에 대한 변경 사항은 다음과 같습니다
<div class="span4" id="rightFooter">
<div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
<ul>
<div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li> </div>
<div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li> </div>
</ul>
</div>
CSS :
.trow {
display: table-row;
background-color: green;
margin-right: 0;
}
.tcell {
display: table-cell;
background-color: green;
}
.trow h5 {
display: table-row;
background-color: yellow;
}
여기가 색깔 행과 세포 모습입니다 :
안녕하세요. 나는 테이블 셀과 테이블 행을 사용해 보았지만 제대로 사용하지 못하고 원하는 모양을 얻으려면 어떻게 커스터마이징해야하는지 잘 모르겠다. 스크린 샷과 수정 된 HTML/CSS를 원래 게시물에 첨부했습니다. – sam