常用布局

RyanQ 發(fā)布于2019-08-02 14:00 / 659人閱讀

摘要：轉(zhuǎn)載上下布局，上方高度固定，下方高度自動填滿原地址鏈接轉(zhuǎn)載實現(xiàn)兩個并排等高原地址鏈接居中會限定寬度不限定寬度不定寬內(nèi)圖片居中學(xué)生活動頁

轉(zhuǎn)載：html上下布局，上方高度固定，下方高度自動填滿

原地址鏈接

轉(zhuǎn)載：css實現(xiàn)兩個div并排等高

原地址鏈接

居中

// 會限定寬度
.mertailImgActive {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    
// 不限定寬度
    .boardItemCon {
        margin: auto;
        text-align: center;
        font-size: 3rem;
        color: white;
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
    }

不定寬div內(nèi)圖片居中


     
     
學(xué)生活動頁

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53504.html

相關(guān)文章

CSS常用布局

摘要：頭部主要內(nèi)容左邊欄右邊欄尾部顯示為頭部主要內(nèi)容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個很重要的部分，甚至我覺得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結(jié)一下使用過的CSS常...

aaron 2019-08-29 12:59 評論0 收藏0
Andriod 四大布局使用詳解

摘要：中常用的四大布局。已經(jīng)棄用，此問略過。線性布局，常用布局之一，主要有水平布局垂直布局兩種。繼承關(guān)系繼承，關(guān)系如下簡單例子如下上述布局實現(xiàn)代碼如下微信公眾號程序員至此，本篇已結(jié)束，如有不對的地方，歡迎您的建議與指正。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); 極力推薦文章：歡迎收藏A...

Batkid 2019-08-19 10:20 評論0 收藏0
微信小程序開發(fā)必備必看常用的Flex布局模式－wxflex

摘要：首發(fā)地址微信小程序的布局種必備常用的布局模式代碼庫地址官方建議的布局的布局相比傳統(tǒng)的布局來說，簡單快捷方便。首發(fā)地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo－4種必備常用的Flex布局模式代碼庫 github地址：https://github.com/icindy/wxflex 官方建議的Flex布局 Fle...

jzzlee 2019-08-29 11:28 評論0 收藏0
深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0
CSS 常用的定位和布局方法匯總(已添加源碼地址)

CSS-Layout 旨在打造詳盡的前端布局代碼學(xué)習(xí)庫（自從用了框架開發(fā)，CSS生疏了不少，所以開這個庫練練手）SF不能正確解析含有中文的網(wǎng)址，所以某些預(yù)覽鏈接無法跳轉(zhuǎn)，請訪問我的博客閱讀此文常見定位方法水平居中子元素為行內(nèi)元素還是塊狀元素，寬度一定還是寬度未定，采取的布局方案不同。方案選擇基本思路：子元素為行內(nèi)元素：對父元素設(shè)置text-align:center; 定寬塊狀元素: 設(shè)...

loonggg 2019-08-29 12:15 評論0 收藏0