我已经搜索了几天的解决方案,但似乎找不到答案。我想要实现的是一个 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;
}}
最佳答案
关于html - 2 列布局流体可调宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24957100/