CSS布局填充其余的水平空间

Question

我试图实现特定的CSS布局。我尝试了很多可能性，包括浮动和CSS表，但我无法弄清楚。 CSS表格在过去有很多帮助，当时有一些固定的列和一些列应该占据剩余空间的列，但这个列表似乎有所不同。

我需要有两列。否则他们需要是他们父母的100％宽度。右列应该与其内容一样宽（即它有3个按钮，它应该与这三个按钮一样宽）。左栏应占剩余空间的其余部分。而已。听起来很简单。在TeX世界中，它被称为“\ hfill”，我希望在CSS中拥有这样的命令。

这里是我试过至今：

<section> 
<div id="a"></div> 
<div id="b"> 
    <button>Bla</button> 
    <button>Test</button> 
    <button>Hello</button> 
    <button>World</button> 
</div> 
</section> 

CSS：

section { display: table; width: 100%;} 
div { display: table-cell; height: 100px; border: 1px solid #000;} 
#a { width: 100% } 
#b{ } 

而且小提琴：

http://jsfiddle.net/fa9FJ/270/

其实这是相当接近我想要什么，但按钮需要水平相邻。

Answer 1

你需要的是

#b { 
    white-space: nowrap; 
} 

Demo

这将防止按钮将div元素里面包裹

Answer 2

尝试this..it工作

button 
{ 
    width: 96%; 
} 

Answer 3

#b { display: table; } 
button { display: table-cell; } 

这应该做的伎俩:)