Question

我正在尝试将两个div（具有动态宽度）并排排列在具有100％宽度的父级中;直到我在其中一个div中遇到嵌套表（也是100％with）时才不难。

我想要的是什么：
#parent宽度100％
#right由内容中的内容引起的自动宽度 #left填补了“#right”留下的空白空间 table“#left”的宽度为100％

问题：
正如你在下面的例子中看到的那样，我可以让div并排，但我不能让表格成为“#left”的100％;相反，它低于“#parent”。

代码：

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

我使用CSS已经有一段时间了。但是，首先，您应该在left代码块之上放置right div。 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 3

<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 4

删除css中的表格宽度，包含jQuery，然后包括：

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

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

});

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

4 个答案: