html - 带有预溢出比例 div 的表格

Question

我正在尝试创建一个简单的 (ha) 两列布局，其中第一列的宽度可变，第二列的大小固定。

第一列包含一个工作正常的表格，除非 td 元素包含一个 pre block 。在这种情况下，前置 block 会延伸到第 2 列。

这是一个简单的例子:

<div class="content">  <div id="Left">    <table id="q-table">      <tr><td>        <div class="q">           <p>This is some paragraph that will be fairly long and wrap.</p>           <pre>This is a very long pre tag that causes headaches.</p>        </div>        <div>            <p>Causes problems if I make class q position: absolute</p>        </div>      </td></tr>     </table>   </div>   <div id="Right">     <p>This is a paragraph on the right with fixed width</p>   </div></div>

这是我在这个例子中使用的 CSS 样式:

.content {    width: 95%;    position: relative;}#Left {    width: 50%;    float: left;}#Right {    float: right;    width: 200px;}#q-table {    width: 99%;}.q {    overflow: auto;    width: 99%}

如果我将 .q 类设置为 position: absolute，那么水平流的大部分行为就像我想要的那样，但是下面的 div 部分向上移动并弄乱了垂直对齐。

pre 标签是罪魁祸首。删除它会导致正确的行为。不幸的是，前置标签是必需的。

想想 StackOverflow 布局，其中带有代码的问题会在小屏幕上显示滚动条，但如果我有一个大显示器，问题区域会扩展并且滚动条会消失。

有人有什么想法吗？
CSS 是否为我想做的事情提供支持？

Answer 1

这可能无法提供所需的结果。但您可以改为调整 white-space 属性。

例如，将其设置为 normal 将使其表现得像 p 标签:

pre {
  white-space: normal;
}

查看实际效果 - http://jsfiddle.net/az85F/

否则，设置width 和overflow 属性。这就是这个论坛对代码示例所做的。一个简单的例子 - http://jsfiddle.net/mj6Nh/1/