Question

我担心它会比那复杂一点。

我需要一个从不包装的流体宽度标题（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] |
|                               |
---------------------------------

你怎么看？你能帮忙吗？

HTML：（http://jsfiddle.net/8ZtU5/）

注意：额外的包装只是为了方便。除了渲染结果外，没有必要。

<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is really really really really really really really long</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>
<div class="container">
    <div class="fluid-width">
        <div class="no-wrapping">
            <h2>This header is short</h2>
        </div>
        <button class="btn1">One</button>
    </div>
    <div class="fixed-width">
        <button class="btn2">Two</button>
    </div>
</div>

基本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;
}

无需猜测...如果你想玩，那就是小提琴：http://jsfiddle.net/8ZtU5/

Answer 1

让这个工作，也许这就是你的意思。 jsfiddle 稍微编辑了html structure

Answer 2

这大致是一个解决方案，您可以通过更改h2的最大宽度来改变标题中显示的文本量。

http://jsfiddle.net/QJg8X/

<强>标记

<div class="container">
    <div class="fluid-width">
        <h2>This header is really really really really really really long</h2>
        <button class="btn1">One</button>
        <button class="btn2">Two</button>
    </div>
</div>
<div class="container">
    <div class="fixed-width">
         <h2>This header is short</h2>
        <button class="btn1">One</button>
        <button class="btn2">Two</button>
    </div>
</div>

<强> CSS

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    display: inline-block;
    overflow: hidden;
    min-width: 200px;
}

.fixed-width {
    display: inline-block;
    overflow: hidden;
    width: 400px;
}

h2 {
    float: left;
    margin: 0;
    padding: 0;
    display: block;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.btn1 { float: left; }
button.btn2 { float: right; }

我只用现代浏览器测试了上述内容。

啊..与AzDesign的答案非常相似（+1），除了它使用浮动而不是绝对定位这一事实。

更新

解决同一问题的另一种方法是为按钮设置一个固定宽度的区域，这意味着标记稍有改动，但这意味着您不必指定最大宽度：

http://jsfiddle.net/QJg8X/2/

<强>标记

<div class="container">
    <div class="fluid-width">
       <div class="buttons">
            <button class="btn1">One</button>
            <button class="btn2">Two</button>
       </div>
       <h2>This header is really really really really really really long</h2>
    </div>
</div>
<div class="container">
    <div class="fixed-width">
        <div class="buttons">
            <button class="btn1">One</button>
            <button class="btn2">Two</button>
        </div>
        <h2>This header is short</h2>
    </div>
</div>

<强> CSS

.container {
    margin:20px 0;
    width:100%;
    min-width:300px;
    background:#eee;
}

.fluid-width {
    display: block;
    overflow: hidden;
    min-width: 200px;
}

.fixed-width {
    display: block;
    overflow: hidden;
    width: 400px;
}

h2 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buttons {
    display: block;
    width: 150px;
    float: right;
}

button.btn2 { float: right; }

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

2 个答案:

更新