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

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


当前回答

解决方案来自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属性,否则空间将不会被填充。

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

其他回答

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

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

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

最简单的解决方案是让左边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

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

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

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

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

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

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

我在Boushley的答案中发现的问题是,如果右列比左列长,它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后,我找到了一个教程(现在链接死了),如何创建三列页面。

作者提供了三种不同的方法,一种是固定宽度,一种是三个可变列,一种是固定外列,中间可变宽。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。

基本上,在上面的简单例子中,将第一列向左浮动,并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:

下面是Stack Snippets & jsFiddle中的一个演示

#{离开 浮:左; 宽度:180 px; } #{正确 margin-left: 180 px; } /*只是为了突出div,例如*/ #left {background-color:粉色;} #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .

在鲍什利的例子中,左边一列表示右边另一列。只要左列结束,右列就开始再次填充整个空间。在这里,右列只是进一步对齐到页面中,而左列占据了它的大空白。不需要流交互。