你可以做一个流体宽度头，不包裹固定宽度的右边栏？ [英] Can you make a fluid-width header that doesn't wrap with a fixed-width right sidebar?

问题描述

我恐怕比这更复杂。

我需要一个流体宽度标题（ h2 .btn1 ），并且不重叠固定宽度的右键（ .btn2 code>）。

I need a fluid width header (h2) that never wraps, with a left aligned button (.btn1), and all without overlapping a fixed-width right button (.btn2).

如果这听起来太复杂，一个写得很好的小提示（ http://jsfiddle.net/8ZtU5/ ）和一些美丽的ASCII艺术？

If that sounds too complicated, how about a well written Fiddle (http://jsfiddle.net/8ZtU5/) and some beautiful ASCII art?

__________________________________________________
|                                                |
| This header is really really... [One]    [Two] |
|                                                |
--------------------------------------------------
__________________________________________________
|                                                |
| This header is short [One]               [Two] |
|                                                |
--------------------------------------------------
_________________________________
|                               |
| This header is... [One] [Two] |
|                               |
---------------------------------

你觉得怎么样？你能帮忙吗？

What do you think? Can you help?

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

不需要猜测...如果你想play： http://jsfiddle.net/8ZtU5/

No need to guess... it's all on the fiddle if you want to play: http://jsfiddle.net/8ZtU5/

推荐答案

让这个工作，也许这是你的意思。 jsfiddle
编辑 html结构有点

got this one working, maybe this is what you meant. jsfiddle Edited the html structure a bit

这篇关于你可以做一个流体宽度头，不包裹固定宽度的右边栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！