0

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

我想要什么：
#parent宽度 100%
#right由内容引起的自动宽度
#left填充“#right”剩余的空白空间 “#left”
table的 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结构

4

4 回答 4

2

OP 在编辑中写道：

我讨厌发布问题并在不久后解决它，即使在发布问题之前尝试解决问题数小时后，我仍然解决了它。我认为...

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);
}
于 2017-09-27T06:48:14.457 回答
0 
<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);
}

​</p>

于 2012-09-11T17:12:54.430 回答
0

我使用 CSS 已经有一段时间了。但是，首先您应该将leftdiv 放在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);
}
于 2012-09-11T17:05:05.810 回答
0

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

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

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

});​
于 2012-09-11T17:44:42.170 回答