CSS實現已知寬高的div垂直置中;自適應高度兩列布局__div

來源:互聯網
上載者:User

最近筆試經常碰到這個題,平時寫代碼好像很少思考這方面的,我來做一個小小的總結,以備面試之需。。

關於元素垂直布局方面的問題還有很多,而且面試很喜歡問,比如兩列內容不同的布局,高度自適應。我也寫出來。


一、元素垂直置中:

既然用css實現,高和寬應該都是定值吧,如果是根據內容調整的是需要藉助js動態調整的。

<div id='div1'></div>

html,body{height:100%}
#div1{position:absolute;width:300px;height:200px;top:50%;left:50%;background:red;margin:-100px 0 0 -150px;}

被定位的元素必須是絕對位置的,先設一個初始位置,左上方在頁面正中間,再用margin位移

向左位移width/2 ; 向上位移height/2 ;需要我們自己計算,然後元素就置中了。

這是相對於body的,如果這個div是相對於父元素置中,就把父元素的posi設成relative,元素就能相對於父元素定位了。


二、2列布局高度自適應

面試中有時候會問到display有哪些屬性,常用的none,block,inline都能想到,我會容易忽略table相關的屬性。

這個問題用表格屬性寫比較容易。

<div id='div2'><div id='ch1'><ol><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li></ol></div><div id='ch2'><ol><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>refe</li><li>refe</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>ddssd</li><li>refe</li><li>refe</li></ol></div></div>


#div2{width: 100%;display: table;}#ch1{display: table-cell;background: red;}#ch2{display: table-cell;background: blue;color: white;}


demo效果圖:


最近被筆試面試虐的心力交瘁啊,我要是早點發憤圖強就好了

只要肯學,每天都在進步,什麼時候都不晚。。。

加油加油。。。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.