Question

我正在处理有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修复此问题的？

P.S。我只对IE9 +感兴趣

Answer 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>

Answer 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

CSS 2列，左侧固定右侧流体，右侧第一个在html中

2 个答案: