0

我试图使用 div 使用“假”表。

假表结构简单

<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是一个搜索输入字段，它将是“弹性”的，因此每次使用 1200 像素的 1900 像素时，例如这个元素必须“增长”到 #fatable 达到 100%..

我什至有一个 jsfiddle，因为我记得这太难了。但是如果设置为 100% 宽度，#fatable3那么这些元素会占用页面的 100% 宽度，使得#fatable屏幕宽度实际上是 175%。

http://jsfiddle.net/DDMMc/

还是我必须搬到真正的桌子上才能做到这一点？

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

这是：http: //jsfiddle.net/sU5Kx/

4

2 回答 2

2

我应该使用 div 表布局的 css 代码。它很干净。我在这里更新了你的小提琴 链接

Serach 获取更多信息css div tablelayout。

#fatable {
max-width:100%;
width:100%;
white-space: nowrap;
display: table;
float:left;
}
于 2013-08-04T18:13:48.253 回答
0

我只是做了一个猜测，希望这是你想要的..

这是小提琴演示

只需将此添加到您的fatable3 ..

 #fatable #fatable3
{
   float:left;
   width:100% !important;
}

这将改变 ua 设计，但您可以根据需要调整其他 div...

于 2013-08-04T18:03:50.577 回答