jquery - 如何将 div 内容布局为 i) 水平排列和 ii) 子项延伸到父项

Question

我已经使用#right-col 将屏幕的剩余宽度从#left-col 设置为 500px(或其他)。

我试图找到的是一种让#entries、#entry 和#entry-part 同时做两件事的方法:i) 占据#right-col 的整个宽度(#right-wrapper 也是相同的宽度)，即使在调整窗口大小的同时，ii)将它们并排水平排列，以便 iii)其他 div 拉伸(stretch)#right-content 并隐藏在#right-wrapper 后面的右侧。

我显然看过类似的帖子。但我的问题似乎是#right-col 是 float:right。我已经设置了this jsfiddle来说明问题。

    #right-col
      #right-wrapper
        #right-content
          #entries
          #entry 
          #entry-part

出于某种原因，我无法实现这 3 个目标。有什么帮助吗？

非常感谢

Answer 1

display:box(它不在 w3c 或 mozilla 文档中，它真的存在吗？)似乎引起了麻烦。

请看这里:http://jsfiddle.net/jh2qE/9/
(我只在#main-content 中注释掉了一些css)

这里有一些要记住的提示:

• position:absolute 将你的元素脱离上下文，所以

  <div style="width:100%><div style="width:100%;position:absolute">content</div></div>

  (是的，内联 css 很糟糕)
  在此示例中，内部 div 将仅采用显示内容所需的内容(例如，一点也不大)。

• float:side 如果您不清除它，则不会占用父元素中的空间

  <div style="min-height:1em"><div style="float:left;height:1000px">stuff</div></div>

  这里的父 div 高度只有 1em，而不是 1000px。

• display:block 元素默认占容器宽度的 100%。

应该可以。

虽然我不太确定你想要获得什么。
你想要什么的图片可以验证(或无效)我的答案。