CSS 2列，左固定右流体，右列在html中首先答案

【问题标题】：CSS 2 columns, left fixed right fluid, with right col first in htmlCSS 2列，左固定右流体，右列在html中首先
【发布时间】：2014-03-17 08:39:14
【问题描述】：

我正在处理有 2 列的布局。我想要实现的是：左列固定，右列流动，但右列在 html 中优先。

到目前为止，我有这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>2 cols: left fixed right fluid with right first in html</title>
    <style type="text/css">

    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body{
        margin:0 20px;
        padding 0;
    }

    .main {
        position: relative;
        background-color:red;
        float:left;
        width:auto; 
        margin-left:240px;
        display:inline;
    }

    .main aside {
        float:left;
        width:240px;
        padding-right: 60px;
        margin-left:-240px;
        position:relative;
        text-align: right;
        background-color: aqua;
    }
    .right {
        float:left;
        width:100%;
        margin-right:-2140%;
    }
    </style>
</head>

<body>
    <div class="main">
        <section class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>

        <aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</aside>
    </div>
</body>
</html>

除了在 IE9 中之外，它在任何地方都可以正常工作。

任何想法如何在不使用 IE 条件样式表的情况下为 IE9 解决此问题？

附言我只对IE9+感兴趣

【问题讨论】：

stackoverflow.com/questions/22428261/…
@NicoO 好建议，我not a fan 使用表格显示类型进行布局。
@NicoO 这个建议不是我想要做的。我希望右列在 html 中的左列之前
@HashemQolami 为什么不使用display:table 进行布局？使用这样的东西进行布局是 css 的重点，因此您不需要使用实际的 html 表格进行布局
@Pete 根据Spec: These values cause an element to behave like a <table> element 可能会在渲染页面时导致change behavior of web browser。无论如何，表格布局可以make it impossible 到achieve the desired result。

标签： css internet-explorer-9

【解决方案1】：

为此我不得不使用calc 感觉有点糟糕。也许我应该看看旧项目；）如果有人知道更优雅的方式，请随时编辑或发布新答案。

由于您希望修复左列，我会这样做： http://jsfiddle.net/umv78/1/

 * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 .left, .right {
     border: 1px solid red;
 }
 .right {
     float: right;
     width: calc(100% - 200px);
 }
 .left {
     width: 200px;
 }

HTML：

<section class="right">I'am on the Right ...</section>

<aside class="left">Lorem ipsum dolor ...</aside>

【讨论】：

+1 我现在不想写答案，但作为替代方法，这种方法可以从 IE4 开始工作：jsfiddle.net/hashem/Tam7z/3
IE4 能做到吗？惊人。我以为我在 MAC 上使用 IE 5.5 很糟糕；）不错的哈希姆！
刚刚发现 IE6+ 支持 transparent 边框颜色值，作为后备你可以尝试 white 值。
我不会回到那里。我试图否认IE8 atm的存在
似乎@pete 使用padding 属性做了类似的事情。

【解决方案2】：

试试这些样式：

.main:after {content:' '; display:block; height:0px; overflow:hidden; clear:both;}
.main {
    background-color:red;
    width:auto; 
    padding-left:300px;
}

.main aside {
    float:left;
    width:240px;
    margin-left:-300px;
    background-color: aqua;
}

.right {
    float:right;
    width:100%;
}

Example

【讨论】：

不错，但您也应该将主边的宽度更改为 300 像素。
@NicoO，原文中，side和section之间有60px的距离
@Pete - 谢谢，在我看来这似乎是最好的解决方案 - 结果比我想象的要简单得多！我只在 IE9 中测试过它，但正如我在问题中所说的那样，这就是我所需要的。