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

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


当前回答

由于这是一个相当流行的问题,我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下,overflow: auto触发上下文行为,并使右元素仅扩展到可用的剩余宽度,如果.left消失,它将自然扩展到全宽度。对于许多UI布局来说,这是一个非常有用和干净的技巧,但一开始可能很难理解“为什么它有效”。

其他回答

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

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

最简单的解决方案是让左边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,你是在假装它——在我看来,这在某种程度上违背了这种特定情况下风格论证的目的。

现在,您应该使用flexbox方法(可以适用于所有带有浏览器前缀的浏览器)。

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

最简单的解决方法是使用保证金。这也将是响应!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>