兩列布局

左側固定寬度,右側自適應。

BFC實現
<div class="container">
    <div class="aside">左列寬度固定</div>
    <div class="main">右列寬度自適應</div>
<div>

.container {
  /* position: relative; */
}
.container .aside {
  float: left;
  width: 200px;
  background: red;
  height:200px;
}
.container .main {
  overflow: hidden;
  background: blue;
  height:200px;
}
Table實現
<div id="main">
    <div id="left">DIVA</div>
    <div id="right">DIVB</div>
</div>
<div id="bottom">DIVC</div>

#left, #right{
    height: 200px;
}
#left {
    width:200px;
    background: red;
}
#right {
    background: blue;
}
#main { display: table; width: 100%; }
#left,#right { display: table-cell; }
#right { width: auto; }
相對絕對定位
<div class="container">
    <div class="aside">左列寬度固定</div>
    <div class="main">右列寬度自適應</div>
<div>

.container {
    position: relative;
}
.container .aside {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: red;
}
.container .main {
    height: 200px; 
        margin-left: 200px;
    background: blue;
}

若要兩側都是自適應時,則使用百分比。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容