html - CSS 假表 div，在 div 内扩展以填充总宽度的 100%

Question

我正在尝试使用 divs 使用“假”表。

假表结构简单

<div id="fatable">
   <div id="fatable1"></div>
   <div id="fatable2"></div>
   <div id="fatable3"></div>
   <div id="fatable4"></div>
   <div id="fatable5"></div>
   <div id="fatable6"></div>
   <div id="fatable7"></div>
   <div id="fatable8"></div>
</div>

#fatable {
    width:100%;
    white-space: nowrap;
}
#fatable1, #fatable2, #fatable3, #fatable4, #fatable5, #fatable6, #fatable7, #fatable8 {
    float:left;
}

我现在的问题是名为#fatable3 的元素必须自行扩展，以便#fatable 始终达到可能的 100%...

#fatable3 是一个搜索输入字段，它将是“flex 的”，因此每次将 1900px 设置为 1200 时，例如这个元素必须“增长”到 #fatable 达到 100%。 .

我什至有一个 jsfiddle，因为我记得这并不难。但是如果为 #fatable3 设置 100% 宽度，那么这个元素将占据页面的 100% 宽度，使得 #fatable 就像屏幕宽度的 175% 一样。

http://jsfiddle.net/DDMMc/

还是我必须移动到真实的 table 才能实现此目的？

这是 jsfiddle 的简化版本，我只需要一行，但是当我为内联元素设置 100% 宽度时，它会下降，因为它占用了 100% 的宽度而不是空间留在里面..希望你能理解我

在这里:http://jsfiddle.net/sU5Kx/

Answer 1

我应该使用 css 代码进行 div 表格布局。它很干净。 我在这里更新了你的 fiddle a link

搜索 css div tablelayout 以获取更多信息。

#fatable {
max-width:100%;
width:100%;
white-space: nowrap;
display: table;
float:left;
}