2013-04-29 71 views
0

我開發一個流動佈局網頁的頁腳。下面是HTML:流體佈局頁腳分隔符

<div id="footer"> 
    <div id="lists"> 
     <div class="list1" id="list-sep"> 
      <p id="footer-par"> 
       Lorem Ipsum<br /> 
       Lorem Ipsum<br /> 
       Lorem Ipsum Lorem Ipsum<br /> 
       Lorem Ipsum<br /> 
       Lorem Ipsum Lorem Ipsum<br /> 
       PEC<br /> 
       Lorem Ipsum<br /> 
       <br /> 
       &copy; region<br /> 
      <p> 
     </div> 
     <div class="list1" id="list-sep"> 
      <ul> 
       <li class="footer-point">President</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsu</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 

      </ul> 
     </div> 
     <div class="list1" id="list-sep"> 
      <ul> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
      </ul> 
     </div> 
     <div class="list1"> 
      <ul> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum </li> 
       <li class="footer-point">Lorem Ipsum </li> 
      </ul> 
     </div> 
     <hr /> 
</div> 

這裏是CSS:

@charset "UTF-8"; 
/* CSS Document */ 

* { 
    margin:0; 
    padding:0; 
} 

#footer { 


    height:auto; 
    width:100%; 
    float:left; 
    margin-top:40px; 


} 

#lists { 

    width:75%; 

    height:auto; 
    margin:20px auto 0 auto; 



} 



.list1 { 


    float:left; 
    width:20%; 
    height:100%; 
    min-height:116px; 
    display:block; 
    padding-left:4%; 
    /*padding-bottom:44px;*/ 
    /*padding-top:21px;*/ 


} 


#list-sep { 

    border-right:1px solid #CCCCCC; 


} 

.footer-point { 

    display:block; 
    margin-top:5px; 
    font-family:'Myriad Pro'; 
    font-size:0.6em; 
    color:#CCC; 
} 

#footer-par { 

    margin-top:20%; 
    margin-bottom:20%; 
    font-family:'Myriad Pro'; 
    font-size:0.6em; 
    color:#CCC; 

    height:100%; 

} 

ul { 


    margin-top:20%; 
    margin-bottom:20%; 

} 

列的高度和寬度(調整瀏覽器窗口時)必須適應文本內他們的量,但三分隔符必須具有相同的高度。此外,調整瀏覽器時,我想,這三個分離適應他們的身高基於文本的量,但它們必須具有相同的高度。換句話說,分隔符必須適應大多數文本的列。任何人都可以幫助我?任何幫助將非常感激。

+0

退房http://jsliang.com/eqHeight.coffee/ – ferne97 2013-04-29 21:26:40

+1

可悲的是,你只能通過

或JS實現這一目標。 – 2013-04-29 21:36:00

回答

0

CSS display: table是你想要的這裏。例如。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
@charset "UTF-8"; 
/* CSS Document */ 

* { 
    margin:0; 
    padding:0; 
} 

#footer { 
    height:auto; 
    width:100%; 
    float:left; 
    margin-top:40px; 
} 

#lists { 
    display: table; 
    width:75%; 
    height:auto; 
    margin:20px auto 0 auto; 
    border-bottom: 1px solid #ccc; 
} 

.list1 { 
    display: table-cell; 
    width:20%; 
    padding:4%; 
} 


#list-sep { 
    border-right:1px solid #CCCCCC; 
} 

.footer-point { 
    display:block; 
    margin-top:5px; 
    font-family:'Myriad Pro'; 
    font-size:0.6em; 
    color:#CCC; 
} 

#footer-par { 
    margin-top:20%; 
    margin-bottom:20%; 
    font-family:'Myriad Pro'; 
    font-size:0.6em; 
    color:#CCC; 
    height:100%; 
} 

ul { 
    margin-top:20%; 
    margin-bottom:20%; 
} 
</style> 

</head> 
<body> 

<div id="footer"> 
    <div id="lists"> 
     <div class="list1" id="list-sep"> 
      <p id="footer-par"> 
       Lorem Ipsum<br /> 
       Lorem Ipsum<br /> 
       Lorem Ipsum Lorem Ipsum<br /> 
       Lorem Ipsum<br /> 
       Lorem Ipsum Lorem Ipsum<br /> 
       PEC<br /> 
       Lorem Ipsum<br /> 
       <br /> 
       &copy; region<br /> 
      <p> 
     </div> 
     <div class="list1" id="list-sep"> 
      <ul> 
       <li class="footer-point">President</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsu</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 

      </ul> 
     </div> 
     <div class="list1" id="list-sep"> 
      <ul> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
      </ul> 
     </div> 
     <div class="list1"> 
      <ul> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum</li> 
       <li class="footer-point">Lorem Ipsum </li> 
       <li class="footer-point">Lorem Ipsum </li> 
      </ul> 
     </div> 
</div> 

</body> 
</html> 
+0

謝謝!你是對的 – 2013-05-08 20:43:15