制作HTML右侧栏,html – 你能制作一个没有固定宽度右侧边栏的流体宽度标题吗？...

我担心这比那复杂一点.

我需要一个从不包装的流体宽度标题(h2),左对齐按钮(.btn1),并且所有都没有重叠固定宽度的右按钮(.btn2).

如果这听起来太复杂了,那么写得好的Fiddle(http://jsfiddle.net/8ZtU5/)和一些漂亮的ASCII艺术怎么样？

__________________________________________________

| |

| This header is really really... [One] [Two] |

| |

--------------------------------------------------

__________________________________________________

| |

| This header is short [One] [Two] |

| |

--------------------------------------------------

_________________________________

| |

| This header is... [One] [Two] |

| |

---------------------------------

你怎么看？你能帮我吗？

注意：额外的包装只是为了方便.除了渲染结果外,没有必要做任何事情.

This header is really really really really really really really long

One

Two

This header is short

One

Two

基本CSS：

.container {

margin:20px 0;

width:100%;

min-width:300px;

background:#eee;

}

.fluid-width {

min-width:200px;

display:inline-block;

}

.fixed-width {

width:100px;

max-width:100px;

min-width:100px;

display:inline-block;

}

.no-wrapping {

overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;

}

h2 {

display:inline;

}