Question

我有两个div。一个漂浮在左边，一个漂浮在右边。左边的一个宽度设置为18％，最小宽度为217px。我想让右侧的div占用剩余的空间，同时还可以调整大小以适应窗口。

我遇到的问题是我可以将正确的div的宽度设置为82％并向右浮动，直到我使窗口太小，在这种情况下，左侧div的最小宽度启动并且它停止萎缩。正确的div没有足够的空间来适应，所以它被推下来。

以下是一些示例代码。

HTML

    <div id="div1">
       stuff inside of it
    </div>
    <div id="div2">
       stuff inside of it
    </div>

CSS

    #div1
    {
     float: left;
     width: 18%;
     height: 100vh;
     min-width: 130px;
     box-shadow: 0px .3em .2em #000;
     z-index: 2;
    }

    #div2
    {
     width: 82%;
     float: right;
     z-index: 1;
    }

所以这就是我被困住的地方，我应该如何处理修复div2？我尝试过使用一个表而不是div，但是在单元格周围出现了一个我无法改变的边框，它删除了我的盒子阴影，所以我更倾向于没有它的解决方案。

Answer 1

你对使用表的想法在某种程度上是正确的，因为表元素实际上有许多属性使它们能够做到这一点，但正如人们在评论中指出的那样，它不再是一种有效的使用方法用于非表格数据布局的表格元素。

这就是为什么CSS实现了一组为反映这些独特属性而构建的样式规则。您可以使用样式display: table;围绕两个元素设置容器，然后为其子项设置样式display: table-cell;

将右侧div的宽度设置为100％将确保它始终填充尽可能多的空间。

但是，由于当内容超出表格宽度时，表格单元格无法分解为新行，因此它会自动调整为适合。因此，当另一个div（左边的一个）具有特定的最小宽度时，右边的div被给予较少的空间以保持单元格的包含。

以下是使用您的代码的示例：

http://jsfiddle.net/Q5rjL/

CSS表格显示属性为您提供了这些独特元素的所有好处，但没有语义问题。它们适用于其他样式显示类型不足的复杂布局。

Answer 2

您还可以包含overflow:hidden的浮点数：

#div2{
  overflow:hidden;
  z-index: 1;
}

DIV将填满剩余空间（http://jsfiddle.net/MAjwt/）

如何使div填满剩余的水平空间

2 个答案: