2

Hl，我的名字是储蓄者，我有一个问题。我只是忍不住使用<table>s. 我上瘾了，这对我来说是个问题。我需要一些支持，并且需要一些聪明的网页设计师向我展示我的方式的错误。

2列布局

所以我试图做一个简单的两列布局：左侧导航，右侧内容。一张快速的桌子，我很高兴。

<table>
  <tr>
    <td valign="top"><!-- Navigation --></td>
    <td valign="top"><!-- Content --></td>
  </tr>
</table>

对结果相当满意。内容在页面的流程中。我可以指定单元格的宽度，让它们扩大以填充空间，或缩小以适应内容。但是一旦我开始引入嵌套表（当然是合法的表格数据）......标记变得丑陋且难以阅读和维护。此外，我所有的网页设计师伙伴都诉诸于点名。

那么我的选择是什么？我比较喜欢position:absolute;。只需一点 css...

.left { position:absolute; top:0; bottom:0; left:0; width:200px; }
.right { position:absolute; top:0; bottom:0; left:200px; right:0; }

...和最少的 HTML 标记...

<div class="left"><!-- Navigation --></div>
<div class="right"><!-- Content --></div>

光滑！标记清晰，设计流畅。但是现在我尝试在我光滑的两列下面添加一些东西，我遇到了彻底的混乱 (jsFiddle)。我不在页面的流程中工作，但我不知道我的内容会有多高！所以我不能指定高度。我很容易放弃……所以让我们试试别的吧。

老实说：float吓到我了。标记不明显，浮动元素似乎有自己的想法，有险恶的动机在边缘情况下破坏我的设计。考虑这个jsfiddle。我仍然没有在页面流程中工作。我想要具有流畅内容的静态宽度导航？做什么？

我不知道伙计们。桌子似乎是一个更好的选择。有人跟我讲道理。我可能会再次使用...

4

1 回答 1

0

如果我理解您想要正确执行的操作，我认为您正在寻找overflow="auto". overflow 属性用于指定如果内容溢出元素的框会发生什么。

.more {
background: rgba(0,255,0,.5);
padding:10px;
overflow: auto;
}

这是一个工作示例：http: //jsfiddle.net/MJaSD/

于 2012-09-13T04:34:13.437 回答