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 />
© 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%;
}
列的高度和寬度(調整瀏覽器窗口時)必須適應文本內他們的量,但三分隔符必須具有相同的高度。此外,調整瀏覽器時,我想,這三個分離適應他們的身高基於文本的量,但它們必須具有相同的高度。換句話說,分隔符必須適應大多數文本的列。任何人都可以幫助我?任何幫助將非常感激。
退房http://jsliang.com/eqHeight.coffee/ – ferne97 2013-04-29 21:26:40
可悲的是,你只能通過
回答
CSS
display: table
是你想要的這裏。例如。來源
2013-04-30 00:37:47
謝謝!你是對的 – 2013-05-08 20:43:15
相關問題