我有2个div:一个在左边，一个在右边。左边的宽度是固定的，我想用右边的填充剩余的空间。
#搜索{ 宽度:160 px; 高度:25 px; 浮:左; background - color: # ffffff; ｝ #{导航 宽度:780 px; 浮:左; background - color: # A53030; ｝ < div id = "搜索" > < / div >文本 < div id = "导航" > < / 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/
其他回答
最简单的解决方案是让左边div的宽度等于100% -右边div的宽度加上它们之间的任何边距。
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
https://codepen.io/tamjk/pen/dybqKBN
Boushley的答案似乎是使用浮动来安排这一过程的最佳方法。然而，它也不是没有问题。展开元素中的嵌套浮动将不可用;它会破坏页面。
当涉及到扩展元素时，所显示的方法基本上是“伪造”的——它实际上并不是浮动的，它只是使用其边缘来处理固定宽度的浮动元素。
问题就在于:展开的元素不是浮动的。如果你尝试在展开元素中有任何嵌套的浮动，这些“嵌套的”浮动项根本就不是嵌套的;当你试图坚持明确:两者;在“嵌套”浮动项下，最终也会清除顶级浮动。
然后，为了使用Boushley的解决方案，我想添加一个div，如下所示: .fakeFloat ｛ 高度:100%; 宽度:100%; 浮:左; ｝ 并将其直接放置在展开的div中;所有展开的div的内容都应该在这个fakfloat元素中。
出于这个原因，我建议在这种特定情况下使用表。浮动元素实际上并不是为执行您想要的展开而设计的，而使用表的解决方案则是微不足道的。有一种说法是，浮动更适合布局，而不是表格。但无论如何，你并没有在这里使用float，你是在假装它——在我看来，这在某种程度上违背了这种特定情况下风格论证的目的。
如果有人需要相同的解决方案，但没有固定长度的左div:
如果你想让左边的div占据所有的空间，你可以删除固定大小的180px。参见下面的CSS:
#left {
float: left;
background-color: red;
}
#right {
background-color: yellow;
flex-grow: 1
}
参见这里的JSFiddle: JSFiddle -div-space
如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
我在尝试布局一些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>
