Question

问题陈述如下，假设您有一个包含三个元素的标题：

<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>

徽标和选项分别具有220px和294px的绝对值。元素布局安排是：

.logo { float:left; }
.search {float:left; }
.options { float:right; }

现在我想让.search 100％的窗口窗口 - 220px - 294px）。

这个问题的答案应该是寻求不涉及的答案：

css calc函数，如：.search {width：calc（100％ - 200px - 294px）; }
的JavaScript！

我想过使用一张桌子让第二个td =＆gt; 'search'自动计算它的宽度。但似乎有点矫枉过正，用表来实现这一点。

我很好奇答案。不要打扰小提琴，半个字对我来说已经足够了。

Answer 1

您可以为搜索div使用保证金：

.logo { float:left;width: 220px; }
.search {margin: 0 295px 0 221px;}
.options { float:right;width:294px;}

但是为此，应该像这样订购html标记：

<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>

Answer 2

我想过使用一张桌子让第二个td =＆gt; ＆＃39;搜索＆＃39;自动计算它的宽度。但似乎有点矫枉过正，用表来实现这一点。

是的，但您可以从display: table-cell（widely supported来自所有当前浏览器）中受益，而无需实际使用表格

e.g。

<div id="wrapper">
  <div class="logo">logo</div>
  <div class="search">search</div>
  <div class="options">options</div>
</div>

的CSS

#wrapper { display: table; width: 100%; }
#wrapper > div  { display: table-cell;  }

.logo    { width: 220px; }
.options { width: 294px; }

实例（1）：http://codepen.io/anon/pen/QwjBqQ

此外，在屏幕下方，您可以通过媒体查询更改每个块的位置，

实例（2）：http://codepen.io/anon/pen/ogjMpX

Answer 3

@BhojendraCLinkNepal提供了一种适用于旧浏览器的传统解决方案，但您必须更改HTML结构。另一种解决方案适用于flex的新浏览器。

<style>
  body {display: flex; flex-direction: row;} /* or the header container */
  .logo {width: 220px;}
  .search {flex: 1;}
  .options {width: 294px;}
</style>
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>

有关浏览器兼容性的信息，请参阅here。

Answer 4

我记得做一些事情，用显示块制作一个“容器”div，然后将div对齐，就像对齐文本一样。但那是一段时间了。

你可以在felxbox上使用aloo http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ...没有脚本...只是css ...它的功能相似。

Answer 5

因此，在我看来，最终的解决方案是更加平衡：

<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>

.logo { 
   float:left; 
   width: 220px; 
}
.search {
   float: left;
   width: calc(100% - 220px - 294px);

   /* fallback for browsers not support calc() */
   width: auto\9;         /* IE6, IE7, IE8, IE9 */
   margin-left: 221px\9;  /* IE6, IE7, IE8, IE9 - please ensure this equals .logo:width +1    */
   margin-right: 295px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .options:width +1 */ 
}
.options { 
   float:right; 
   width:294px;
}

关于这个解决方案的注意事项：浏览器黑客不是很优雅，虽然我倾向于在IE中使用它们很多。如果您完全反对它，我建议您尝试使用非标准表达式（）语法模拟calc。

谢谢大家！

Answer 6

另一种解决方案可能就像这样：jsfiddle

<div class="wrapper">
    <div class="search">search</div>
    <div class="logo">logo</div>
    <div class="options">options</div>
</div> 

.wrapper{
    position:relative;
}

.wrapper .logo{
    position:absolute;
    width:220px;
    top:00px;
    left:00px;
}

.wrapper .options{
    position:absolute;
    top:00px;
    right:00px;
    width:294px;
}

.wrapper .search{
    position:relative;
    width:100%;
    text-indent:240px;
}

HTML / CSS全宽标题有三列 - 2个固定一个松散

6 个答案: