表格中的DIV不会像预期的那样伸展

问题描述

编辑：看来，简单的解决方案是将#menu div从容器中取出，但是从我只是嘲笑css-tables的角度来看，我认为将其放入容器中并赋予它更有意义它是自己的行。我仍然不明白为什么这行不通。

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

我希望#menu div排成一行并延伸到标题的长度。它的表现非常完美，但是当我在它下面添加一个新行时，我还想将其#content和#sidebar div扩展到标题的长度，因此#menu宽度会被截断，并且#content和#sidebar divs也不要像我希望的那样一直水平伸展。

如果听起来令人困惑，则只需预览代码即可，这很明显是我正在尝试做的事情。

我觉得我缺少一些简单的东西。我试图在不使用绝对定位的情况下执行此操作，但严格使用表格布局。

有人可以看到我在做什么错吗？

谢谢。

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,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,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>

解决方法

您需要将table-cell中的display: table-cell;替换为#content。本质上，要解决问题，您需要在#menu上应用列跨度，但不幸的是CSS尚不支持行跨度和列跨度。您可以在HTML colspan in CSS

上阅读与该主题相关的更多讨论。 ,

您可以将属性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概述Android Calendar Provider 示例https://css-tricks.com/snippets/css/a-guide-to-flexbox/

好吧，我想您应该学习如何使用网格。最好使用表格。也是我给您的原始框架，是菜单始终插入标题的唯一原因是菜单始终包含在标题中。要了解您要使用的框架，您必须看到站点的三个部分：页眉，内容和页脚。

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

现在确定当前问题：

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,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,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>

css-tables html