具有三列的 HTML/CSS 全宽标题 - 2 固定 1 松散

Question

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

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

Logo 和选项的绝对宽度分别为 220px 和 294px。元素布局安排是:

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

现在我想让 .search 100% 的窗口 window - 220px - 294px)。

这个问题的答案应该尽量寻找不涉及的答案:

• css calc 函数，例如:.search{ width: calc(100% - 200px - 294px);
• javascript!

我考虑过使用表格并让第二个 td => '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>