<div class="parent">
    <ul class="menu">
        <li>this</li>
        <li>width</li>
        <li>is</li>
        <li>dynamic.</li>
    </ul>

    <div class="something">
        <span>so is this</span>
        <table>because of this table.</table>
    </div>

    <div class="fill">
        <span>and so is this. but this guy needs to fill the remaining width.</span>
    </div>
</div>

Image

这3个项目 – ul和2 divs – 并排排列,如您所见,它们具有动态宽度.我必须使这三个项目适合div.parent,宽度固定在1200px.

目前,我正在使用’float：left;’将这3个项并排排列,我可以使用’display：inline-block;’如果有必要[完美地工作].但我试图用’display：table;’来尝试一些技巧.对于父级和’display：table-cell;’对于这3个项目,没有成功.

我需要填充黑色div上的剩余空间,即’div.fill’.有任何想法吗？

EDIT2：http://jsfiddle.net/cAs9t/