文章/答案/技术大牛

发布

社区首页 >问答首页 >表中的DIV没有按其应有的方式伸展

问表中的DIV没有按其应有的方式伸展
EN

Stack Overflow用户

提问于 2020-08-24 21:37:21

回答 3查看 75关注 0票数 1

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

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

我希望#menu在它自己的一行中，并延伸到标题的长度。它完美地做到了这一点，但是当我在它下面添加一个新的行和#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>

html

css

css-tables

回答 3

Stack Overflow用户

发布于 2020-08-24 22:24:18

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

票数 0

Stack Overflow用户

发布于 2020-08-24 22:37:40

您可以将属性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

票数 0

Stack Overflow用户

发布于 2020-08-25 06:17:49

好吧，我想你应该学习如何使用网格。最好用一张桌子。还有我给你的原始框架，菜单嵌入到标题中的唯一原因是它与它一起留在顶部。为了理解你试图使用的框架，你必须看到网站有3个部分:页眉，内容和页脚。

标题是应该显示在每一面顶部的所有内容，包括标题和菜单(导航栏)。页脚是一个可选的东西，和页眉一样，总是在底部显示相同的内容。然而，内容始终是chanegs的特点。这就是我最初把它作为ID而不是class给你的原因。它是所有东西的“包装器”。类部分，是显示不同部分的部分。我关注了你到目前为止遇到的其他问题(如果你愿意的话，我会继续这样做，并成为你的私人指导！)。

好了，现在来看看当前的问题：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63562172

复制

相似问题

问表中的DIV没有按其应有的方式伸展
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表中的DIV没有按其应有的方式伸展EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表中的DIV没有按其应有的方式伸展
EN