两个列布局，左侧流体，右侧填充其余宽度

Question

我需要与this和this类似的内容。但是我希望右列不是固定大小，而是可变大小。可能吗？

–––––––––––––––––––––––––––––––––––––––––––––––––––––––
|some text|stretch to fill the remaining space        | <- viewport
–––––––––––––––––––––––––––––––––––––––––––––––––––––––

Answer 1

这是float解决方案。您可以将固定的width设置为.one列，或保持原样让内容决定。并将overflow: auto;或overflow: hidden;设置为.two列。

＆＃13;

＆＃13;

.one {
    float: left;
    background: aqua;
}
.two {
    overflow: auto;
    background: yellow;
}

＆＃13;

<div class="one">hello</div>
<div class="two">world</div>

＆＃13;

＆＃13;

＆＃13;

flexbox解决方案。关键是将flex: 1;又名flex-grow: 1;设置为动态宽度列。按照this查看浏览器支持表。

＆＃13;

＆＃13;

body {
    display: flex;
}
.one {
    background: aqua;
}
.two {
    flex: 1;
    background: yellow;
}

＆＃13;

<div class="one">hello</div>
<div class="two">world</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许遗漏了一些东西，但不能用于每个项目？

<div>
<span>left text<span/><span>right text<span/>
</div>

Answer 3

http://jsfiddle.net/A8zLY/2333/ 从我发布的链接小提琴。 右边不需要固定宽度。见上面的链接

width:auto

这是你要找的吗？

Answer 4

如果您正在使用双柱按钮...（您的ascii屏幕截图看起来像这样），那么：以最佳方式潜水空间但是一方获胜，如果它变紧➝没有截断价格，但必须是截断标签...➪full source on codepen

<div class="container">
    <div class="two">125&thinsp;€</div>
    <div class="one">my favorite provider</div>
</div>

CSS（手写笔）

.container
    clearfix()
    border 2px solid purple

.one, .two
    padding 4px

.two
    background #aca 
    float right
    white-space nowrap
    text-overflow ellipsis

.one
    background #caa 
    overflow hidden 
    white-space nowrap
    text-overflow ellipsis