两栏布局

最新推荐文章于 2020-10-03 11:47:21 发布

butterfly~~

最新推荐文章于 2020-10-03 11:47:21 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础知识文章标签：两栏布局左侧定宽，右侧自适应前端页面布局基础

本文链接：https://blog.youkuaiyun.com/Maomengdie1998/article/details/88050215

前端基础知识专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了多种网页布局技巧，包括浮动(float)、定位(position)、负边距(margin)、弹性盒子(flex)及块级格式化上下文(BFC)等方法，详细解析了如何实现左侧定宽右侧自适应的布局效果。

左侧定宽，右侧自动

float+margin

<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

html,body{
    margin:0;
    padding: 0;
    
}
.m-box .left,
.m-box .right { 
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}
.m-box .left{
    float:left; 
    width:200px; 
    background-color:#ccc;
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}

position+margin

<div class="m-box">
    <div class="left">左</div>
    <div class="right">右</div>
</div>

html,body{
    margin:0; 
    padding: 0;
}
.m-box .left,
.m-box .right {
    height: 200px; 
    line-height:200px; 
    text-align:center; 
}

.m-box .left{
    position: absolute;
    width:200px;
    background-color:#ccc; 
}
.m-box .right{
    margin-left:210px;
    background-color:#666;
}

float+负margin

<div class="m-box">
    <div class="cont">右</div>
</div>
<div class="m-asider">左</div>

html,body{
    margin:0; 
    padding: 0;
}
.m-box .cont,
.m-asider { 
    height: 200px;
    line-height:200px;
    text-align:center;
}

.m-box { 
    float:left; 
    width: 100%;
}
.m-box .cont {
    margin-left:210px;
    background-color: #ccc;
}
.m-asider {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #ccc;
}

flex

<div id="container">
    <div id="aside"></div>
    <div id="main"></div>
</div>

  #container {
            display: flex;
            background-color: aqua;
            height: 100%;
        }
        
        #aside {
            flex: 0 0 200px;
            /* flex-grow flex-shrink flex-basis */
            background-color: rgb(52, 61, 30);
            height: 600px;
        }
        
        #main {
            flex: 1 1;
            /* flex-grow 和 flex-shrink */
            background-color: rgb(224, 115, 188);
        }

float+BFC方法

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
    基本的样式是，两个div相距20px, 左侧div宽 120px
  </div>
</div>

 .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-float-bfc {
            overflow: auto;
        }
        
        .wrapper-float-bfc .left {
            float: left;
            margin-right: 20px;
        }
        
        .wrapper-float-bfc .right {
            margin-left: 0;
            overflow: auto;
        }

双inline-block方案

 <div class="wrapper wrapper-inline-block" id="wrapper">
        <div class="left">
            <p>左边固定宽度，高度不固定</p>
            </br>
            </br>
            </br>
            </br>高度有可能会很小，也可能很大。
        </div>
        <div class="right">
            这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
            基本的样式是，两个div相距20px, 左侧div宽 120px
        </div>
    </div>

  .wrapper {
            padding: 15px 20px;
            border: 1px dashed #ff6c60;
        }
        
        .left {
            width: 120px;
            border: 5px solid #ddd;
        }
        
        .right {
            margin-left: 20px;
            border: 5px solid #ddd;
        }
        
        .wrapper-inline-block {
            box-sizing: content-box;
            font-size: 0; // 消除空格的影响
        }
        
        .wrapper-inline-block .left,
        .wrapper-inline-block .right {
            display: inline-block;
            vertical-align: top; // 顶端对齐
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .wrapper-inline-block .right {
            width: calc(100% - 140px);
        }