html - 2 列布局流体可调宽度

Question

我已经搜索了几天的解决方案，但似乎找不到答案。我想要实现的是一个 2 列布局，其中左列根据浏览器宽度流动，右列宽度根据其内容流动。

右栏不能有固定宽度，因为一些内容是从数据库生成的，宽度可以变化。我认为该解决方案可以处理 display: inline-block 但似乎无法正确处理。当左列的内容将列的宽度推得比可用空间更宽时，右列跳转到另一行并且不会保持内联。

我们还需要远离任何 javascript，因为某些用户会禁用它。

非常感谢任何帮助!

这是我目前所拥有的:

HTML:

<div id='container'>
   <div id='left'> 
      this is some really long text that takes up a lot of room since it is so long
   </div>
   <div id='right'>
      <a>this is a link</a>
   </div>
</div>

CSS:

#container{
   width: 100%;
   background: red;
}

#left{
   display: inline-block;
   background: green;
}

#right{
   display: inline-block;
   margin: 15px;
   background: yellow;
}

#right a{
   padding: 5px 20px;
}}

Answer 1

你可以尝试使用 flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

这真是个好工具。我想这会有所帮助。