Question

在此之前被标记为重复，请听我说。我想要一个由2列或更多列组成的列布局。第一个div（左边的元素）应该扩展以获取剩余的宽度，而右边的列具有特定的宽度。 StackOverflow有很多这些问题，尽管没有描述这种情况。

我可以使用表格布局; （http://jsfiddle.net/j08691/NmrbP/6/）

<div class="left"></div>
<div class="right"></div>

这种方法的问题在于我无法设置表格的高度（任何table-cell都忽略高度），列布局应该伸展到适合父级高度的100％。

我可以将浮动元素与overflow:hidden结合使用; （http://jsfiddle.net/SpSjL/）

<div class="right"></div>
<div class="left"></div>

这种方法的问题在于元素已被交换（即左元素在右边定义）。这不适用于响应式网站，其中左侧元素应出现在右侧元素之前（例如SmartPhones）。 AFAIK我不能用纯CSS交换元素，我必须为较小的分辨率做这些。

任何解决方案吗？

TL; DR我希望第一个（左）列扩展，而其余列具有特定宽度。所有列的高度必须为100％（即适合父级的高度），并且元素不应交换标记中的位置。

Answer 1

寻找calc() function in css3 ??

您的解决方案： http://jsfiddle.net/NmrbP/19/

将所有内容包装在master容器中，然后浮动它们....（别忘了清除浮动）

<强> CSS

  #master {
    width:100%;
    height:100%;
    border:1px solid #000;
}
#divLeft {
    float:left;
    background-color: lightgreen;
    width: calc(100% - 250px); /* extra loaded stuff by me */
    width: -moz-calc(100% - 250px); /* to make cross browser */
    width: -webkit-calc(100% - 250px);  /* to make cross browser */
    height:100%; /* give div full height */
}
#divRight {
    float:left;
    background-color: lightblue;
    vertical-align: top;
    width : 250px; /* extra loaded stuff by me */
    height:100%; /* give div full height */
}

.clr{
    clear:both; /* extra loaded stuff by me */
}

展开左侧div以获取剩余宽度，无需交换具有指定高度的元素

1 个答案: