溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關基于BFC規則如何實現的css兩列布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
<!--利用BFC的overflowhidden實現兩列布局-->
<!DOCTYPEhtml>
<html>
<head>
<title>利用BFC規則實現兩欄布局</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;/*用于純數字和英文時能夠超出時自動換行*/
background:blue
}
.contain.right{
height:100%;
overflow:hidden;/*讓right成為一個BFC*/
word-wrap:break-word;/*用于純數字和英文時能夠超出時自動換行*/
background:darkblue;
}
</style>
</head>
<body>
<!--CSS2.1規范中已經明確提出，設置overflow屬性（非visible）能觸發塊級格式化上下文(BlockFormattingConext,BFC)。-->
<div>
<div>Loremipsumdolorsitamet,consecteturadipisicingelit.Officiaquiserroreaveniamanimiquibusdam,nobisrepudiandaeconsectetursed?Minusarchitectocumqueperspiciatissaepererumnondolorumvoluptatessimilique,consequuntur.</div>
<div>right這里的overflow:hidden不是本來的意思（超出容器內容截取掉不顯示），而是利用了BFC規則（overflow不為visible時會創建出一個BFC）</div>
</div>
</body>
</html>
注意代碼中最長的那行（37行），這里的文本不是英文，是拉丁文，當然不是我手打的這么多。跟大家分享下，在測試時，想輸入一些內容又不知道輸入什么，怪難看的時候，可以偷懶。輸入lorem，然后tab鍵出來，除了第一句話時固定的，后面的那段時它隨機出來的句子。前提是你的編輯器裝有emmit插件，Hbuilder，vscode內置有，直接可用，submittext需要去裝插件。記事本就肯定是不行的了，這些都是我親測的。算是一個小干貨吧！其他的，注釋也差不多寫了，本來代碼也很簡單，就這么些東西，css需要自己多動手去試，去實現出來。這次隨筆就到這兒了，忙的時候質量可能不太好，不過現在開始堅持寫一些東西了。
還有就是這是左邊固定，右邊自適應。右邊固定，左邊自適應相信你也能輕松搞定吧，這都是小事，想起了，提醒下。這個兩列自適應不是兩列都是自適應的。
關于“基于BFC規則如何實現的css兩列布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
