1

我正在尝试实现特定的 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/

实际上这与我想要的非常接近，但按钮需要水平相邻。

4

3 回答 3

2

你需要的是

#b { 
   white-space: nowrap;
}

演示

这将防止按钮包裹在div元素内

于 2013-07-15T07:22:59.240 回答
0

试试这个..它有效

button
{
   width: 96%;
}
于 2013-07-15T07:25:51.110 回答
0 
#b { display: table; }
button { display: table-cell; }

这应该可以解决问题:)

于 2013-07-15T07:26:00.350 回答