2013-07-17 3 views
0

twitter 부트 스트랩 span4 클래스로 3 개의 div를 중첩하는 내 웹 페이지에 꼬리말이 있습니다. 나는 'Contact Us'헤더가 왼쪽에서 '오른쪽'과 동일한 거리에 있고 '중간에'유용한 링크 '가 왼쪽 아래에 각각의 div에 대한 모든 텍스트가 왼쪽 아래에 정당화되도록하고 싶습니다. current바닥 글에 divs를 균등하게 배포합니다.

당신은 오른쪽 가장자리에서입니다 연락처 우리와 함께 연결보다 왼쪽 가장자리에 가까운 것을 볼 수 있습니다

이것은 내가 지금까지있는 것입니다.

그러나 아래의 목록 항목은 요소와 왼쪽 정렬하지 않는 헤더에 대해 텍스트 정렬을 사용해 보았습니다.

다음은 머리글에 text-align을 사용하여 어떤 모습인지 보여주는 이미지입니다. 당신은 내가 원하는대로가 배치되어 있음을 알 수 있지만 아래의 내용은 그들과 함께 왼쪽 정렬되지 않은 : 여기 with 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; 
} 

여기가 색깔 행과 세포 모습입니다 : enter image description here

답변

0

display: table-cell을 사용하여 블록 b 표 셀로 사용하면 스타일을 동일하게 만들 수 있습니다.

블록을 플로팅하거나 display: inline-block을 사용하여 각 블록에 너비의 3 분의 1을 제공 할 수 있지만 확대/축소시 반올림 오류가 발생하여 마지막 블록이 다음 줄로 넘어갈 수 있습니다. 블록이 table-cells처럼 동작하면 문제가 발생하지 않습니다.

+0

안녕하세요. 나는 테이블 셀과 테이블 행을 사용해 보았지만 제대로 사용하지 못하고 원하는 모양을 얻으려면 어떻게 커스터마이징해야하는지 잘 모르겠다. 스크린 샷과 수정 된 HTML/CSS를 원래 게시물에 첨부했습니다. – sam

0

일부 CSS ID의 이름을 변경하고 HTML에서 b 태그와 같은 마크 업을 삭제했습니다 (그 이유는 확실하지 않습니다). 앰퍼샌드 &&amp;이어야합니다.

두 번째 .span4의 내용을 가운데에두고 왼쪽 맞춤을 유지하는 두 개의 DIVs .outer.inner을 추가했습니다. 가장 중요한 것은 .outer의 너비를 설정하는 .outerfloat: left;입니다. float: left; 대신 display: inline-block;을 사용할 수도 있습니다. .outer이 컨테이너의 왼쪽으로 50 % 이동 한 후 .inner이 컨테이너의 오른쪽 50 % (.outer)로 이동했습니다. 결국 그것은 .span4의 중심에서 끝납니다.

제 3의 .span4에 대해 우리는 당신의 트위터 부트 스트랩에있는 것들을 오른쪽에 뜨는 .pull-right 클래스의 DIV를 추가했습니다. 이렇게하면 텍스트를 다시 정렬하지 않고 모든 것을 세 번째 .span4 오른쪽으로 설정합니다.

.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; 
} 
#contact-us { 
    padding-left: 50px; 
} 
.outer { 
    position: relative; 
    left: 50%; 
    float: left; 
} 
.inner { 
    position: relative; 
    right: 50%; 
} 
#connect-with-us { 
    padding-right: 50px; 
} 
#connect-with-us li { 
    padding-top: 5px; 
} 
#connect-with-us a { 
    padding-left: 5px; 
} 
.follow { 
    line-height: 19px; 
} 
<footer class="footer"> 
    <div class="row-fluid"> 
      <div class="span12"> 
       <div id="contact-us" class="span4"> 
        <h5>Contact Us</h5> 
        <ul> 
         <li><a href="#">Tel:</a></li> 
         <li><a href="#">E-mail: [email protected]</a></li> 
        </ul> 
       </div> 
       <div class="span4"> 
        <div class="outer"> 
         <div class="inner"> 
           <h5>Useful Links</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 &amp; Conditions</a></li> 
           </ul> 
         </div> 
        </div> 
       </div> 
       <div id="connect-with-us" class="span4"> 
        <div class="pull-right"> 
         <h5>Connect With Us</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> 
    </div> 
</footer> 
관련 문제