佈局 —— 左側固定，右側自適應

實現佈局：左側固定，右側自適應

一. flex佈局

html：

<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

 

css：

.content {
    width: 100%;
    display: flex;
}
.left {
    width: 200px;
    height: 500px;
    background: #e1e1e1;
}
.right {
    flex: 1;
    height: 500px;
    background: #666;
}

二. 

html同上

css：

.content {
    width: 100%;
}
.left {
    width: 200px;
    height: 500px;
    background: #e1e1e1;
    float: left;
}
.right {
    height: 500px;
    background: #666;
}

 

三. 相似聖盃佈局

html同上

css：

.content {
    padding-left: 200px;
}
.left {
    width: 200px;
    height: 500px;
    background: #e1e1e1;
    float: left;
    margin-left: -200px;
    }
.right {
    width: 100%;
    height: 500px;
    background: #666;
}

 

四. 相似雙飛翼佈局

html:

<div class="main">
    <div class="right"></div>
</div>
<div class="left"></div>

css：

.main {
    float: left;
    width: 100%;
}
.right {
    height: 500px;
    background: #666;
    margin-left: 200px;
}
.left {
    width: 200px;
    height: 500px;
    background: #e1e1e1;
    float: left;
    margin-left: -100%;
}