两列布局两种方法实现

Question

第一种方法是外边距+固定宽度+浮动
还有什么方法？越多越好，谢谢。

Answer 1

1. table: http://jsfiddle.net/wdndzxor/
2. flex: http://jsfiddle.net/wdndzxor/1/
3. calc: http://jsfiddle.net/wdndzxor/2/

Answer 2

补充三个:
1. 父元素相对定位、内边距 + 子元素绝对定位 + 子元素默认 http://jsfiddle.net/2guphsdo/
2. 父元素相对定位 + 子元素绝对定位 + 子元素外边距（同1类似）http://jsfiddle.net/xk7wsk85/
3. 利用 BFC http://jsfiddle.net/3b37951k/

Answer 3

这道题应该是百度ife吧？
我刚写好这题，把自己的解题思路理一下。
看到这道题的内容我想到了双飞翼和圣杯布局，刚好是两种方法，而且也能宽度自适应。
先贴代码

<style>
        .box1{
            width: 200px;
            height: 100px;
            float: left;
            background: blue;
            margin-left: -100%;
        }
        .box2{
            width: 100%;
            float: left;
            height: 100px;
            background: red;
        }
        .box3{
            width: 100%;
            height: 100px;
            background: yellow;
            float: left;
        }
        .box2_wrap{
            margin-left: 200px;
        }
    </style>
<div id="container">
        <div class="box2">
            <div class="box2_wrap">box2</div>
        </div>
        <div class="box1">box1</div>
        <div class="box3">box3</div>
    </div>

这是第一种方式，用的是双飞翼布局。

第二种代码`style>

    .box1{
        width: 200px;
        height: 100px;
        float: left;
        background: blue;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .box2{
        width: 100%;
        float: left;
        height: 100px;
        background: red;
    }
    .box3{
        width: 100%;
        height: 100px;
        background: yellow;
        float: left;
    }
    .box{
        padding-left: 200px;
    }
</style>

<div id="container">

    <div class="box">
        <div class="box2">box2</div>
        <div class="box1">box1</div>
    </div>
    <div class="box3">box3</div>
</div>`

就是圣杯了。

我把这道题理解成为 左侧固定宽度是导航，右侧自适应部分则是核心内容。
所以，会想到把box2写在前面（重要内容先加载），box1放在后面。然后根据margin的负边距强大属性改变位置。

具体的细节你可以参考http://www.imooc.com/wenda/detail/254035。我就不多说了。

PS：看到题目，可以联想下实际会怎么应用比较好，然后根据之前看过的东东就会去理解啦，希望你能亲自打出来，会很有成就感，我也刚开始学，共勉！

Answer 4

有五种方法来实现：https://github.com/JesseZhao1...