2

我正在尝试在我的网页中创建以下 2 列布局：

+-------+---+
|       |   |
|       |   |
|   A   | B |
|       |   |
|       |   |
|       |   |
|       +---+
|       |   |
|       | C |
|       |   |
+-------+---+

具有以下特点：

  1. 左列和右列都有固定的宽度。
  2. C的内容是固定的，所以C有固定的高度。
  3. A 和 B 中的内容量可能会有所不同（最终用户提供），因此 A 和 B 所需的最小高度可能会有所不同。
  4. 如果 A 需要的高度超过 B 和 C 的总和，则应拉伸 B 的高度，使其保持与 C 接触，并且 C 的底部与 A 的底部对齐。
  5. 如果 A 需要的高度小于 B 和 C 的总和，则应拉伸 A 以使 A 和 C 的底部对齐。
  6. A 和 B 具有不同的边框和/或背景颜色，因此我不能通过不拉伸其中一个来作弊（而 C 不需要拉伸）。

我尝试通过用 div 表示每个单元格并使用 jQuery 的文档就绪事件将单元格调整到适当的高度，具体取决于哪一列最高。
大多数情况下，这是有效的。但是，因为 A 包含一个嵌入的 YouTube 视频，而 C 包含一个嵌入的 Google Maps 部分，所以有很多动态内容调整正在进行，这有时会导致我的 javascript 代码使用错误的高度值并弄乱布局过程.
此外，当您看到内容单元格被拉伸到正确的高度时，它看起来相当难看，即使如果它始终如一地工作我也可以忍受。

作为替代方案，我尝试在此布局中使用表格，因为它们内置了“使所有列保持相同高度”的行为。
这种方法的问题是我必须对 A 使用“td rowspan = 2”，一旦我这样做了，IE 和 Chrome 就会忽略我在 C 上指定的任何固定高度，而是让 C 太高。

所以基本上我完全坚持如何实现这个（看似简单的）布局。谁能指出我正确的方向？

我的目标是 Chrome、FireFox 和 IE7+，但在 IE7 和 IE8 中，所需布局的合理近似值是可以接受的。

4

2 回答 2

1

试试这个混合 div 作为表格。我在 Mac 上，但我无法在 IE 上测试它，但我认为它可以在 IE 上运行良好

HTML：

<div id="table">
    <div id="table-cell-left">
        <div id="aid" class="row">A ID</div>
    </div>
    <div id="table-cell-right">
        <div id="bid" class="row">B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br />B ID content <br /></div>
        <div id="cid" class="row">C ID</div>
    </div>
</div>

CSS：

#table{display:table;}

#table-cell-right,
#table-cell-left{display:table-cell;}

#table-cell-left{background:blue;}

#aid,#bid,#cid{width:150px}

#aid{height:100%;border:1px solid #ccc;}
#bid{height:auto;border:1px solid #000;background:red;}
#cid{height:20px;float:right;background:yellow}

在这里查看演示：http: //jsfiddle.net/WpuPq/5/

于 2013-06-06T21:14:12.407 回答
1

好的，我在工作，所以这是我目前能做的最好的，但它在 IE7 上运行良好。

前几句。对于这个解决方案，我使用了表格。现在使用表格没有任何问题 - 当您将它用于表格数据或在这种罕见的情况下。在这种情况下，必须使用基本的 css 来解决这个问题。唯一的另一种方法是使用可能会疏远某些用户的技术（高级 CSS） - 最终，由您决定是否使用可能无法在每个人的浏览器中使用的东西。如果您使用 CSS3+，我肯定无法正常查看您的网站，因为我现在卡在 IE7 上。

我在 IE7 上对此进行了测试，效果非常好。如您所见，它也不是很繁重的代码。

HTML

<div id="cols">
<table>
    <tbody>
        <tr>
            <td class="left"">A Box</td>
            <td class="right">
                <div>B Box</div>
                <div>C Box</div>
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS：

#cols table td {
    width: 250px;
}
#cols table td.left {
    background: #f1f1f1;
}
#cols table td.right {
    padding: 0 0 250px 0;
    background: #ccc;
    position: relative;
}
#cols table td.right div + div {
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: #000;
    color: #fff;
}

结果：

两种情况下的测试结果

如您所见，此代码适用于 2 种情况：左列较大；或者，右列更大。

于 2013-06-06T21:40:55.673 回答