左定宽右自适应宽度并且等高布局

要求：

左列定宽，右列自适应；
左右两列等高且自适应；
右列优先渲染；

对于第一点很好实现，实现的方法也不唯一。
对于实现两列等高，则需要实现最小高度的设置。如下：

min-height: 200px; 
height: auto !important; 
height: 200px;

对于实现右列先渲染，在HTML代码中将右列写前边，然后给左列margin-left属性一个适当值即可。

好啦～废话不多说了，接下来一起来动手实践吧。

首先，建立框架，加入两栏：

<div id="container">
    <div id="right">我在右边，自适应布局</div>　//写在左列前边，实现右列优先渲染。
    <div id="left">我在左边，定宽</div>
</div>

#right{
    width: 100%;
    background-color:red;
}

#left{
    background-color:green;
    width: 200px;
}

#left, #right{
    min-height: 200px;
    height: auto !important;
    height: 200px;
}

效果图如下：

第一步

接着将左列放上去

#right{
    float:left;
}

#left{
    float: left;
    margin-left: -100%;
}

效果图如下：

第二步

我们看到右列的部分内容被左列覆盖掉了。

所以，接下来需要让被覆盖的内容显现出来

#container{
    margin-left: 200px;
    position: relative;
}

#left{
    position: relative;
    left: -200px;
}

这里的主要思想是，设置container容器的margin-left值为左列的宽度，在相对定位的情况下，把左列的left属性的值设为其宽度即可。
效果图如下：

第三步

好啦～到此为止所有的要求都已经实现了～（高度自适应未实现，可以参考如何实现多列等高布局？）

参考资料：
https://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width

左定宽右自适应宽度并且等高布局

推荐阅读更多精彩内容