表中的 DIV 不会像应有的那样伸展答案

【问题标题】：DIV in table does not stretch like it should表中的 DIV 不会像应有的那样伸展
【发布时间】：2020-08-24 13:37:21
【问题描述】：

编辑：似乎简单的解决方案是将#menu div 从容器中取出，但从我刚刚教授 css-tables 的方式来看，我认为将它放在容器中并给它会更有意义它是自己的行。我仍然不明白为什么这不起作用。

我正在学习如何使用 CSS 和 HTML 在表格中排列我的页面，但遇到了一个我不明白的奇怪问题。

我希望#menu div 独立成一行并延伸到标题的长度。它做得非常完美，但是当我在它下面添加一个新行时，我的 #content 和 #sidebar div 我也想拉伸到标题的长度，#menu 宽度被切断，#content 和 #sidebar div也不要像我希望的那样一直水平伸展。

如果听起来令人困惑，只需预览代码，我想要做什么应该很明显。

我觉得我缺少一些简单的东西。我试图在不使用绝对定位但严格使用表格布局的情况下做到这一点。

谁能看到我在这里做错了什么？

提前致谢。

html, body {
  margin: 0;
}

header {
  height: 200px;
  margin: 10px 10px 0px 10px;
  background-color: green;
}

#tablecontainer {
  display: table;
  border-spacing: 10px;
  width: 100%;
}

.row {
  display: table-row;
}

#menu {
  display: table-cell;
  background-color: green;
  padding: 60px;
  vertical-align: top;
}

#sidebar {
  display: table-cell;
  background-color: green;
  vertical-align: top;
  width: 50%;
}

#content {
  table-cell;
  background-color: green;
  vertical-align: top;
  width: 50%;
}

footer {
  background-color: green;
  height: 200px;
  margin: 0px 10px 10px 10px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <header>
      sdf Lorem ipsum 
    </header>
    <div id="tablecontainer">
      <div class="row">
        <div id="menu">sdf Lorem ipsum dolor sit amet,</div>
      </div>
      <div class="row">
        <div id="sidebar">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Except
        </div>
        <div id="content">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        </div>
      </div>
    </div>
    <footer>asdas</footer>
  </body>
</html>

【问题讨论】：

在 CSS 中的 #comment {...}，你的意思是写 display: table-cell 而不是 table-cell？
谢谢@GalaxyCat105，我做到了。这解决了第二行宽度的一个问题，但菜单仍未正确展开。嗯……
Width: auto; 将 div 拉伸到其完整的父空间上。使用Width: 100%;，您会在使用父宽度时遇到问题，然后将填充和边距放在顶部。意味着您将获得滚动条。

标签： html css css-tables

【解决方案1】：

您需要在#content 中将table-cell 替换为display: table-cell;。基本上要解决问题，您需要在#menu 上应用列跨越，但不幸的是，CSS 尚不支持行跨越和列跨越。您可以阅读与此主题相关的进一步讨论：HTML colspan in CSS

【讨论】：

【解决方案2】：

您可以将属性colspan="value" 与td 标记一起使用，但不能将其与div 标记一起使用。

<table style="width:100%">
  <tr>
    <th colspan="2">Menu</th>
  </tr>
  <tr>
    <td>Sidebar</td>
    <td>Content</td>
  <tr>
</table>

您可以使用 flexbox 来实现这一点 Flexbox概述https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 示例Demo Flexbox 3

【讨论】：

【解决方案3】：

我想你应该学习如何使用网格。最好用一张桌子。还有我给你的原始框架，将菜单包含在标题中，唯一的原因是它与它保持一致。要了解您尝试使用的我的框架，您必须看到网站的 3 个部分：页眉、内容和页脚。

标题是应该在每一侧的顶部显示的所有内容，包括标题和菜单（导航栏）。页脚是一个可选的东西，与页眉一样，在底部显示时总是相同的内容。然而，内容始终是变化的。这就是为什么我最初将它作为 ID 而不是作为类给你的原因。它是一切的“包装”。类部分是显示不同部分的部分。到目前为止，我关注了您遇到的其他问题（如果您愿意，我会继续这样做并成为您的个人指南！）。

现在到当前问题：

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

#title {
  height: 200px;
  width: auto;
  background-color: green;
  margin: 0 0 10px 0;
}

#menu {
  background-color: green;
  padding: 60px;
  width: auto;
  margin: 0 0 10px 0;
}

#content {
  width: 100%;
  margin: 0 0 10px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  grid-auto-rows: auto;
  grid-template-areas:
    "SectionSidebarLeft SectionSidebarRight";  
}

#sectionSidebarLeft {
  padding: 10px;
  background-color: green;
  grid-area: SectionSidebarLeft;
}

#sectionSidebarRight {
  padding: 10px;
  background-color: green;
  grid-area: SectionSidebarRight;
}

footer {
  background-color: green;
  height: 200px;
  width: auto;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <header>
      <div id="title">sdf Lorem ipsum</div>
      <div id="menu">sdf Lorem ipsum dolor sit amet,</div>
    </header>
    <div id="content">
      <div id="sectionSidebarLeft">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Except
      </div>
      <div id="sectionSidebarRight">sdf Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
      </div>
    </div>
    <footer>asdas</footer>
  </body>
</html>

【讨论】：

tacoshy，感谢您关注我并成为我的老师。慷慨是非常感激的，最重要的是非常有帮助。我正在学习的书是 2012 年的，所以我不知道网格。在您发布并查看您如何使用它之后，我决定用这一天来学习它，因为它似乎确实比桌子好！谢谢，我会在下一篇文章中见到你（希望如此）;-)
只是跟进：我现在玩过网格，显然我正试图将事情保持在最低限度，以便逐步采取行动。在#content 中，我只设置了 display: grid, grid-template-columns: 1fr 1fr;和柱间隙，我得到了和你一样的结果。所以你介意解释一下为什么你在“repeat (2, 1fr)”中添加并命名模板区域，当它看起来没有必要的时候？只是试图理解。谢谢。
当然，如果您愿意，这将使编辑和使用更多列变得更加容易。如果您想要 4 列而不是 2 列，您只需用 4 grid-template-columns: repeat(4, 1fr) 切换 2。当然，您仍然必须在grid-template-areas 中定义列。重复将自动计算所需的宽度以使行的大小相同，不会超过父级的最大宽度。