如何让一个div填充剩余的水平空间?

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

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

当前回答

如果你不需要兼容某些浏览器的旧版本(例如IE 10 8或更低版本)，你可以使用calc() CSS函数:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

2015-09-28 14:38:02

其他回答

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

.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>

2012-11-23 14:49:00

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

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

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

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

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

2011-08-30 21:06:00

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

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/

2015-08-05 19:38:53

这里有一个小的解决方案，它可以防止右列落在左列下面。更换宽度: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/

2015-10-04 15:05:30

解决方案来自display属性。

基本上你需要让两个div像表格单元一样。所以不是使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度div，你需要设置width:auto;也。这两个div都应该放在一个100%宽度的容器中，并使用display:table属性。

下面是css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

而HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要提示:对于Internet Explorer，您需要在动态宽度div上指定float属性，否则空间将不会被填充。

我希望这能解决你的问题。如果你愿意，你可以在我的博客上阅读关于这一点的完整文章。

2011-03-24 09:13:20

如何让一个div填充剩余的水平空间?

推荐文章

最新文章

标签