Question

我无法让我的桌面小区在＃34;圣杯的变体上正确调整大小。布局。

当我的主要内容显示为block vs table-cell时，我看到了不同的行为。我已经将问题缩小到这样一个事实：带有长文本的可滚动pre块导致单元格宽度表现奇怪。请参阅下面的代码和小提琴。它显示了与期望行为无关的因素。

请注意，display: table-cell是必需的。我不能简单地将样式用于工作示例（我也不能使用flexbox）。

重要： 要查看所需的调整大小行为，您必须调整窗口大小并观察两个示例的行为方式。 请务必点击代码段结果中的Full Page即可。

＆＃13;

#main {
  display: table;
  margin: 0 auto;
}

#content {
  display: table-cell;
  max-width: 600px;
  background-color: red;
}

.code-block {
  /* display: none; */
  margin: 0px 20px;
  padding: 10px;
  border: 1px black solid;
  overflow: auto;
}

#content-working {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  background-color: green;
}

＆＃13;

<div id="main">
  <div id="content">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>

<!-- desired behavior below -->

<div id="main-working">
  <div id="content-working">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>

＆＃13;

要查看代码块是否存在问题，您可以取消注释/* display: none; */并查看content列是否正确调整大小（尽管没有所需的代码块）。

Answer 1

您可以通过在table-layout: fixed;的样式中添加width: 600%;和#main来解决问题。另外，要应用max-width，我们可以在主div（名为#mainContainer）周围添加一个包装器。

结果如以下摘录：

#mainContainer {
  max-width: 600px; 
  margin: 0 auto; /* make center */
}

#main {
  display: table;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%; /* without this, table-layout:fixed not work! */
}

#content {
  display: table-cell;
  /*max-width: 600px; set in parent div */
  background-color: red;
}

.code-block {
  /* display: none; */
  margin: 0px 20px;
  padding: 10px;
  border: 1px black solid;
  overflow: auto;
}

#content-working {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  background-color: green;
}

<div id="mainContainer">
 <div id="main">
  <div id="content">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
 </div>
</div>

<!-- desired behavior below -->

<div id="main-working">
  <div id="content-working">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>

当包含可滚动的pre时，表格单元格未正确调整大小

1 个答案: