這篇文章主要為大家展示了“web開發(fā)中如何實(shí)現(xiàn)table-cell完成左側(cè)定寬、右側(cè)定寬及左右定寬等布局”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“web開發(fā)中如何實(shí)現(xiàn)table-cell完成左側(cè)定寬、右側(cè)定寬及左右定寬等布局”這篇文章吧。
創(chuàng)新互聯(lián)是專業(yè)的雷山網(wǎng)站建設(shè)公司,雷山接單;提供成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行雷山網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
使用table-cell完成以下幾種布局(ie8及以上兼容)
1、左側(cè)定寬-右側(cè)自適應(yīng)
.left{ width: 300px; height: 500px; border: 1px solid; float: left; } .right{ width: 10000px; height: 500px; display: table-cell; border: 1px solid; }Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.
效果如下:
(調(diào)整窗口大小,來(lái)測(cè)試右側(cè)是否根據(jù)窗口大小改變)
2、右側(cè)定寬-左側(cè)自適應(yīng)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, in inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.
效果如下:
與左側(cè)定寬稍有不同,雖然只是定寬的位置換了,但是不能直接使用浮動(dòng)像左側(cè)定寬那種方式完成。
3、左右定寬-中間自適應(yīng)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde, ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae!
效果如下:
以上是“web開發(fā)中如何實(shí)現(xiàn)table-cell完成左側(cè)定寬、右側(cè)定寬及左右定寬等布局”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!