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

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

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

当前回答

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

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

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

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

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

2011-08-30 21:06:00

其他回答

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

这似乎达到了你想要的效果。

#{离开浮:左; 宽度:180 px; background - color: # ff0000; ｝ #{正确宽度:100%; background - color: # 00 ff00; ｝ < div > < div id = "左" > 左 < / div > < div id = "正确" > 正确的 < / div > < / div >

2009-06-23 14:35:14

／* * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

／* * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

2013-11-08 13:55:13

如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

2016-11-17 16:32:31

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

2016-12-21 13:45:04

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

推荐文章

最新文章

标签