html - 2个div并排对齐，如何使右侧div填充宽度为100%？

Question

我想知道执行此操作的最佳方法是...

我有 3 个 div:

• 一个 div#container，width=100%; 包含 2 个内部 div

• div#inner_left width 动态变化，但宽度不超过 200 像素(将包含产品图片)

• 一个 div#inner_right，其中的宽度应填满容器中的其余空间(将包含描述所显示产品的文本)

  #container {
     width:100%
  }
  
  #inner_left {
      display:inline-block:
      max-width:200px;
  }
  
  #inner_right {
      display:inline-block;
      width:100%; 
  }
  

问题是 div#inner_right 创建了一个换行符并填充了整个宽度。我怎样才能使它们彼此相邻对齐，右边的 div 占左边 div 的宽度(动态变化？)。我已经让这个以其他方式工作，但我正在寻找一个干净的解决方案......

非常感谢对 CSS 菜鸟的任何帮助!

Answer 1

我在这里的答案中还没有真正看到好的解决方案。所以我会分享我的。

最好的方法是使用 CSS 中的 table-cell 选项。要添加的一件重要事情是为具有像素宽度的元素添加“最小宽度”。

例子:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}