如何在左，右，顶部和底部的另一个div中制作div

Question

我的div分别称为bottom，left，right和top。我想在其中放入一个称为“中心”的div。我想使它看起来像这样：

======top======
| left-  center  -right |
------bottom-----------

听起来很简单，但是当我尝试这样做时，我的div从指定位置逃逸时遇到了问题。

body {
  !important margin: 0 auto;
}

#container {
  margin: 0 auto;
  width: 50%;
}

#headertop {
  background-color: #0000CD;
  margin-top: 50px;
  padding-bottom: 80px;
}

#left {
  background-color: #6495ED;
  padding-bottom: 400px;
  width: 10%;
  float: left;
}

#right {
  background-color: #0000CD;
  padding-bottom: 400px;
  margin-left: 600px;
  width: 10%;
  float: right;
}

#bottom {
  clear: both;
  background-color: #6495ED;
  padding-bottom: 80px;
}

<div id="container">
  <header>
    <div id="headertop">
    </div>
  </header>
  <main>
    <div id="center">
    </div>
  </main>
  <aside>
    <div id="left">
    </div>
    <div id="right">
    </div>
  </aside>
  <footer>
    <div id="bottom">
    </div>
  </footer>
</div>

Answer 1

使用flexbox的可能答案：

list_one = list(dict_one.keys())
list_two = list(dict_two.keys())
common_keys = set(list_one) - (set(list_one) - set(list_two))

for key in common_keys:
    if dict_one[key] != dict_two[key]:
        print("Value key is : " + key + ":" + str(dict_two[key]) + " should be like in dict_one : " + str(dict_one[key]))

div {
  height: 20px;
}

#top {
  background-color: pink;
}

#left {
  background-color: #0000ff;
}

#center {
  background-color: #6666ff;
}

#right {
  background-color: #9999ff;
}

#bottom {
  background-color: pink;
}

.flexbox {
  display: flex;
}

.item--flex-1 {
  flex: 1;
}

Answer 2

简化，简化，简化。另外，除非您有必要，否则请尽量不要在今天使用浮点数进行布局，除非您了解这样做后元素会发生什么。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* For flex-grow for .content to stretch page height. */
  margin: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

main {
  flex-grow: 1;
}

/* Demo styles */
header,
footer {
  background-color: whitesmoke;
}

aside {
  background-color: cornsilk;
}

main {
  background-color: aliceblue;
}

<header>Header</header>
<div class="content">
  <aside class="left-sidebar">
    Left Aside
  </aside>
  <main>
    Main
  </main>
  <aside class="right-sidebar">
    Right Aside
  </aside>
</div>
<footer>Footer</footer>

Answer 3

网格也是实现此目的的一种好方法，因为它允许所有元素成为同一个父对象内的同级。

body {
  display: grid;
  grid-template-areas: 'header header header'
                       'left   main   right'
                       'footer footer footer';
  grid-template-rows: max-content 1fr max-content; /* Change this to set the column widths */
  grid-template-columns: max-content 1fr max-content;
  min-height: 100vh; /* To stretch page height */
  margin: 0;
}

body > * {
  padding: 1em;
  outline: 1px solid red;
}

header {
  grid-area: header;
}

.left-sidebar {
  grid-area: left;
}

.right-sidebar {
  grid-area: right;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

<header>Header</header>
<aside class="left-sidebar">
  Left Aside
</aside>
<main>
  Main
</main>
<aside class="right-sidebar">
  Right Aside
</aside>
<footer>Footer</footer>