将两个具有动态宽度的 div 和具有 100% 宽度的嵌套表对齐

Question

我正在尝试让两个 div（具有动态宽度）在具有 100% 宽度的父级中并排排列；直到我在其中一个 div 中遇到了一个嵌套表（也有 100% 的），这并不困难。

我想要什么：
#parent 宽度 100%
#right 内部内容引起的自动宽度
#left 填充剩余空间的空白"#right"
table "#left" 的 100% 宽度

问题：
正如您在下面的示例中看到的那样，我可以让 div 并排，但我不能让表格成为“#left”的 100%；相反，它位于“#parent”之下。

示例：
http://jsfiddle.net/MHWQT/

代码：

html

<div id="parent">

    <div id="right">RIGHT!</div>

    <div id="left">
        <table>
            <tr>
                <th>Header</th>
                <th>Also Header</th>
            </tr>
        </table>
    </div>

</div>

css

#parent {
    width: 100%;
    height: 300px;
}

#right {
    float: right;
    width: auto;
    height: 100%;
}

#left {
    width: 100%;
    height: 100%;
}

table {
    width: 100%;
}

编辑
重播答案
我忘了提到当屏幕在一定宽度下时，我将使用@media 属性来更改#parent 内的所有内容。所以我想保留当前的html结构

Answer 1

The OP wrote in an edit:

我讨厌发布问题并在不久之后解决它，即使在发布问题之前尝试解决问题数小时后，但是，我还是解决了它。我觉得……

css

#parent {
    width: 100%;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
}

#right {
    float: right;
    width: auto;
    height: 100%;
    background: rgba(0, 0, 255, 0.1);
}

#left {
    position: relative;
    overflow: hidden;
    /*width: 100%;*/
    height: 100%;
    background: rgba(0, 255, 0, 0.1);
}

table {
    width: 100%;
    background: rgba(255, 255, 0, 0.5);
}

Answer 2

<table id="parent">
   <tr>
     <td id="left">
        <table id="table">
          <tr>
            <th>Header</th>
            <th>Also Header</th>
          </tr>
        </table>
      </td>
    <td id="right">RIGHT!</td>
  </tr>
</table>

并将您的表格 css 更改为：

#table {
    width: 100%;
    background: rgba(255, 255, 0, 0.1);
}

​

Answer 3

我使用 CSS 已经有一段时间了。但是，首先您应该将您的 left div 放在 right 代码块的顶部。 HTML 和 CSS 按顺序排列（据我所知）

另一件事，您要为左块实现的目标需要一些 JavaScript 才能工作。您应该首先获取表格的内容，当加载时，您需要根据内容的大小调整 left 块的大小。

最好的做法是查看页面加载的生命周期并查看首先呈现的部分，基于此您可以相应地调整它们的大小。

工作编辑：

我使用了您的代码，并认为此代码块将提供“缩小以适应”功能。

HTML：

<div id="parent">
    <div id="right">sdfdsfdsfdsfsdf</div>
    <div id="left">
        <table>
            <tr>
                <th>Header</th>
                <th>Also Header</th>
            </tr>
        </table>
    </div>
</div>

​CSS：

#parent {
    width: 100%;
    height: 300px;
    background: rgba(255, 0, 0, 0.1);
}

#right {
    float:right;
    width:auto;
    height: 100%;
    background: rgba(0, 0, 255, 0.1);
    display:inline-block;
    text-align:center;
}

#left {
    height: 100%;
    background: rgba(0, 255, 0, 0.1);
    width:100%;
}

table {
    width:300px;
    background: rgba(255, 255, 0, 0.1);
}

Answer 4

去掉css中的表格宽度，包含jQuery然后包含这个：

$(document).ready(function(){
   var new_width = $("#parent").width() - $("#right").width();

   $("table").first().css("width", new_width);

});​