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

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

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

其他回答

我在尝试布局一些jqueryUI控件时遇到了同样的问题。尽管现在普遍的理念是“使用DIV而不是TABLE”,但我发现在我的案例中使用TABLE效果更好。特别是,如果你需要在两个元素之间进行直接的对齐(例如,垂直居中,水平居中等),TABLE提供的选项可以提供简单直观的控制。

以下是我的解决方案:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

我也遇到过类似的问题,我在这里找到了解决方案: 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;
}

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

Boushley的答案似乎是使用浮动来安排这一过程的最佳方法。然而,它也不是没有问题。展开元素中的嵌套浮动将不可用;它会破坏页面。

当涉及到扩展元素时,所显示的方法基本上是“伪造”的——它实际上并不是浮动的,它只是使用其边缘来处理固定宽度的浮动元素。

问题就在于:展开的元素不是浮动的。如果你尝试在展开元素中有任何嵌套的浮动,这些“嵌套的”浮动项根本就不是嵌套的;当你试图坚持明确:两者;在“嵌套”浮动项下,最终也会清除顶级浮动。

然后,为了使用Boushley的解决方案,我想添加一个div,如下所示: .fakeFloat { 高度:100%; 宽度:100%; 浮:左; } 并将其直接放置在展开的div中;所有展开的div的内容都应该在这个fakfloat元素中。

出于这个原因,我建议在这种特定情况下使用表。浮动元素实际上并不是为执行您想要的展开而设计的,而使用表的解决方案则是微不足道的。有一种说法是,浮动更适合布局,而不是表格。但无论如何,你并没有在这里使用float,你是在假装它——在我看来,这在某种程度上违背了这种特定情况下风格论证的目的。

使用显示: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>

.container { 宽度:100%; 显示:表; vertical-align:中间; } .left { 宽度:100%; 显示:表格单元; text-align:中心; } 铃声{ 宽度:40像素; 高度:40像素; 显示:表格单元; 浮:正确; } < div class = "容器" > 左< div class = "左" > < / div > < div class = "对" >对< / div > < / div

试试这个。这对我很管用。