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

试试这个......工作

button
{
   width: 96%;
}

Answer 3

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

这应该可以解决问题：）

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

3 个答案: