Question

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

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

这是一个简单的例子：

<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类位置：绝对，那么水平流程的行为大多与我想要的一样，但是下面的div部分会向上移动并混淆垂直对齐。

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

想想StackOverflow布局，其中带有代码的问题会在小屏幕上显示滚动条，但如果我有一个大型监视器，问题区域将会延长，滚动条将会消失。

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

Answer 1

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

例如，将其设置为normal会使其行为类似于p标记：

pre {
  white-space: normal;
}

查看实际操作 - http://jsfiddle.net/az85F/

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

Answer 2

我得出的结论是，根本不可能提供所描述的行为。

我认为问题是桌子和标签相互冲突当其中一个单元格使用预标签时，该表不会强制执行比例间距指令。

表溢出比例div

2 个答案: