我有2个div:一个在左边,一个在右边。左边的宽度是固定的,我想用右边的填充剩余的空间。

#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; } #{导航 宽度:780 px; 浮:左; background - color: # A53030; } < div id = "搜索" > < / div >文本 < div id = "导航" > < / div >导航


当前回答

您可以使用网格CSS属性,是最清晰,干净和直观的方式结构您的盒子。

#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; } #{固定 背景:红色; grid-column: 1; } 剩余# { 背景:绿色; grid-column: 2; } < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >

其他回答

我也遇到过类似的问题,我在这里找到了解决方案: https://stackoverflow.com/a/16909141/3934886

解决方案是一个固定的中心div和液体边列。

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

如果你想要一个固定的左列,只需相应地改变公式。

使用显示:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

我也遇到过类似的问题,并想出了以下行之有效的方法

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

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

这个方法不会在窗口收缩时自动换行,但会自动展开“内容”区域。它将为站点菜单(左)保持一个静态宽度。

以及自动展开内容框和左侧垂直框(站点菜单)的演示:

https://jsfiddle.net/tidan/332a6qte/

我尝试了上面的解决方案,左边是液体,右边是固定的,但它们都不起作用(我知道这个问题是相反的,但我认为这是相关的)。以下是行之有效的方法:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

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

这里有一个小的解决方案,它可以防止右列落在左列下面。更换宽度:100%;带溢出:隐藏;如果有人不知道的话,这是个棘手的解决方案。

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[编辑]还有一个三列布局的例子: http://jsfiddle.net/MHeqG/3148/