布局 —— 左侧固定，右侧自适应

实现布局：左侧固定，右侧自适应

一. 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%;
}

 

转载于:https://www.cnblogs.com/tracy-ling/p/10039964.html