标签：浅谈 color 100% 布局 height width 详情 background left

两列布局：一列宽度固定，另一列宽度自适应。两列高度相等。

布局结构为：

  <div id="two-columns">
        <div id="left"></div>
        <div id="right"></div>
  </div>

1 ： float 和 margin-letf/ margin-right 一起使用

       #two-columns{ 
            width: 1000px;
            height: 1000px;
         }
        #left{
            float: left;
            height: 100%;
            width: 100px;
            background-color: #c66;
        }
        #right{
            margin-left: 100px;
            height: 100%;
            background-color: #66f;
        }

2 overflow：hidden 形成BFC布局。

     #two-columns{ 
            width: 1000px;
            height: 1000px;
         }
        #left{
            float: left;
            height: 100%;
            width: 100px;
            background-color: #c66;
        }
        #right{
            overflow: hidden;
            height: 100%;
            background-color: #66f;
        }

3 利用flex:

    #two-columns{ 
            display: flex;
            width: 1000px;
            height: 1000px;
         }
        #left{
            width: 100px;
            background-color: #c66;
        }
        #right{
            flex: 1;
            background-color: #66f;
        }

三列布局：

经典的三列布局由左中右三列组成，其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。

  <div id="two-columns">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>

实现方式一： overflow + hidden:

     #two-columns {
            width: 400px;
            height: 400px;
        }
        #left {
                float: left;
                width: 50px;
                height: 100%;
                background-color: #f66;
            }
        #center {
                float: left;
                width: 100px;
                height: 100%;
                background-color: #66f;
            }
        #right {
                overflow: hidden;
                height: 100%;
                background-color: #3c9;
            }

标签：浅谈,color,100%,布局,height,width,详情,background,left
来源： https://www.cnblogs.com/taue997/p/14397960.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。