Question

我最近一直在漫游，找到一种在我的页面中有两个盒子的方法，一个是恒定宽度（260px），另一个是空间的其余部分。两者都意味着在同一条线上，或者至少它们的顶部都是对齐的：

|--------------------------------------------------|
||------------||----------------------------------||
||   260 px   ||         Automatic width          ||
||------------||               text               ||
|              |               here               ||
|              |----------------------------------||
|--------------------------------------------------|

正如你在小解释中看到的那样，我有一个包装器，它始终是页面的90％。然后，我的右侧面板必须根据屏幕尺寸进行调整，其宽度为（包装纸的100％） - 260px。虽然，即使我尝试了很多不同的想法，我也无法做到这一点。这是我的代码：

#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right
    display: block;
    background-color: gray;
    float: left;
    width: auto; /* What can I put here ? */
}
#left { /* This one works more or less flawlessly */
    background-color: gray;
    display: block;
    float: left;
    width: 260px;
}

非常感谢你，托马斯

Answer 1

您可以使用以下css

#right {
    display: block;
    background-color: gray;
    float: left;
    width: calc(100% - 260px);
}

根据http://caniuse.com/#feat=calc，这可能适用于所有现代浏览器和IE9及以上版本。

Answer 2

<强> CSS

#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right {
  display: table-cell;
  background-color: gray;
  /* float: left; */
  width: auto;
}
#left {
  background-color: gray;
  display: table-cell;
  /* float: left; */
  width: 260px;
}

DEMO

Answer 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">

    <style>
        #wrapper {
            width: 90%;
            margin: auto; /* Center it ! */
            display: block; 
            background-color: gray;
        }
        #right {
            display: block;
            background-color: gray;
            /*float: left;  - Remove this */ 
            width: auto; /* What can I put here ? A: Leave it like that*/
            height: 100vh;
        }
        #left { /* This one works more or less flawlessly */
            background-color:#DFDEDE;
            display: block;
            float: left;
            width: 260px;
              height: 100vh;
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left"> Left</div>
        <div id="right"> Right </div>
    </div>
</body>
</html>

这是您的demo

如何设置div来填充其父级（水平）剩余的空间？

3 个答案: