恐怕它比这更复杂一些。
我需要一个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/