溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

基于BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局

發(fā)布時間：2022-03-01 10:23:07 來源：億速云 閱讀：144 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)基于BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　<!--利用BFC的overflowhidden實(shí)現(xiàn)兩列布局-->

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<title>利用BFC規(guī)則實(shí)現(xiàn)兩欄布局</title>

　　<metacharset="utf8">

　　<styletype="text/css">

　　*{

　　margin:0;

　　padding:0;

　　}

　　.contain{

　　width:100%;

　　height:100%;

　　background:grey;

　　color:#fff;

　　}

　　.contain.left{

　　float:left;

　　/*margin-right:20px;*/

　　width:200px;

　　height:100%;

　　word-wrap:break-word;/*用于純數(shù)字和英文時能夠超出時自動換行*/

　　background:blue

　　}

　　.contain.right{

　　height:100%;

　　overflow:hidden;/*讓right成為一個BFC*/

　　word-wrap:break-word;/*用于純數(shù)字和英文時能夠超出時自動換行*/

　　background:darkblue;

　　}

　　</style>

　　</head>

　　<body>

　　<!--CSS2.1規(guī)范中已經(jīng)明確提出，設(shè)置overflow屬性（非visible）能觸發(fā)塊級格式化上下文(BlockFormattingConext,BFC)。-->

　　<div>

　　<div>Loremipsumdolorsitamet,consecteturadipisicingelit.Officiaquiserroreaveniamanimiquibusdam,nobisrepudiandaeconsectetursed?Minusarchitectocumqueperspiciatissaepererumnondolorumvoluptatessimilique,consequuntur.</div>

　　<div>right這里的overflow:hidden不是本來的意思（超出容器內(nèi)容截取掉不顯示），而是利用了BFC規(guī)則（overflow不為visible時會創(chuàng)建出一個BFC）</div>

　　</div>

　　</body>

　　</html>

　　注意代碼中最長的那行（37行），這里的文本不是英文，是拉丁文，當(dāng)然不是我手打的這么多。跟大家分享下，在測試時，想輸入一些內(nèi)容又不知道輸入什么，怪難看的時候，可以偷懶。輸入lorem，然后tab鍵出來，除了第一句話時固定的，后面的那段時它隨機(jī)出來的句子。前提是你的編輯器裝有emmit插件，Hbuilder，vscode內(nèi)置有，直接可用，submittext需要去裝插件。記事本就肯定是不行的了，這些都是我親測的。算是一個小干貨吧！其他的，注釋也差不多寫了，本來代碼也很簡單，就這么些東西，css需要自己多動手去試，去實(shí)現(xiàn)出來。這次隨筆就到這兒了，忙的時候質(zhì)量可能不太好，不過現(xiàn)在開始堅持寫一些東西了。

　　還有就是這是左邊固定，右邊自適應(yīng)。右邊固定，左邊自適應(yīng)相信你也能輕松搞定吧，這都是小事，想起了，提醒下。這個兩列自適應(yīng)不是兩列都是自適應(yīng)的。

關(guān)于“基于BFC規(guī)則如何實(shí)現(xiàn)的css兩列布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手