您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么用css實現(xiàn)兩列布局,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
經(jīng)典的兩列布局由左右兩列
組成,其特點為一列寬度固定
、另一列寬度自適應(yīng)
和兩列高度固定且相等
。以下以左列寬度固定和右列寬度自適應(yīng)為例,反之同理。
<div class="two-column-layout"> <div class="left"></div> <div class="right"></div> </div>
float + margin-left/right
左列聲明float:left
和固定寬度,由于float
使節(jié)點脫流,右列需聲明margin-left
為左列寬度,以保證兩列不會重疊。
.two-column-layout { width: 400px; height: 400px; .left { float: left; width: 100px; height: 100%; background-color: #f66; } .right { margin-left: 100px; height: 100%; background-color: #66f; } }
overflow + float
左列聲明同上,右列聲明overflow:hidden
使其形成BFC區(qū)域
與外界隔離。
.two-column-layout { width: 400px; height: 400px; .left { float: left; width: 100px; height: 100%; background-color: #f66; } .right { overflow: hidden; height: 100%; background-color: #66f; } }
flex
使用flex
實現(xiàn)會更簡潔。左列聲明固定寬度,右列聲明flex:1
自適應(yīng)寬度。
.two-column-layout { width: 400px; height: 400px; .left { float: left; width: 100px; height: 100%; background-color: #f66; } .right { overflow: hidden; height: 100%; background-color: #66f; } }
感謝你能夠認真閱讀完這篇文章,希望小編分享的“怎么用css實現(xiàn)兩列布局”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。