相关疑难解决方法(0)

我想要一个双列div布局,其中每个都可以有可变宽度,例如

div {
    float: left;
}
.second {
    background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

我希望'view'dec扩展到'tree'div填充所需空间后可用的整个宽度.目前我的'view'div被调整为它包含的内容.如果两个div占据整个高度也会很好

不重复免责声明:

当float:left设置时,将div扩展到max width, 因为左边的一个具有固定的宽度.

帮助div - 使div适合剩余的宽度, 因为我需要两个向左对齐的列

CSS2.1规范要求overflow除了visible建立新的"块格式化上下文"之外.这让我觉得很奇怪,一个明显的目的是隐藏溢出而不影响布局的属性实际上确实会以一种主要方式影响布局.

看起来像溢出值除了visible组合两个完全不相关的特征之外:是否创建了BFC以及是否隐藏了溢出.它不像"溢出:隐藏"在没有BFC的情况下完全没有意义,因为浮动历史上可以溢出它们的父元素,隐藏溢出而不改变布局似乎是明智的.

这个决定背后的原因是什么,假设它们已知？那些参与规范工作的人是否描述了为什么决定这种情况？

在研究之后,我确认calc应该适用于ie8 +,但它对我不起作用.

这是我制作的JS小提琴:

http://jsfiddle.net/75tzyLoo/

这是代码:HTML:

<div id="outer">
    <div id="inner">

    </div>
</div>

CSS:

#outer{
    width:400px;
    background-color:black;
    height:200px;
}
#inner{
    width:calc(80%-100px);
    width:expression(80%-100px);
    background-color:red;
    height:100%;

}

这是我看到的输出:

我究竟做错了什么？

我知道IE6-7有一个CSS后备calc().同样,我知道有一个jQuery替代方案.

但是,对于IE8,是否只有CSS回退calc()？如果是这样,它是什么？