Как сделать div внутри другого div слева, справа, сверху и снизу

Существует также Plumbum

>>> from plumbum import local
>>> ls = local["ls"]
>>> ls
LocalCommand()
>>> ls()
u'build.py\ndist\ndocs\nLICENSE\nplumbum\nREADME.rst\nsetup.py\ntests\ntodo.txt\n'
>>> notepad = local["c:\\windows\\notepad.exe"]
>>> notepad()                                   # Notepad window pops up
u''                                             # Notepad window is closed by user, command returns

1
задан j08691 4 March 2019 в 16:58
поделиться

3 ответа

Возможный ответ с помощью flexbox:

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;
}
<div id="top"></div>
<div class="flexbox">
    <div id="left" class="item--flex-1"></div>
    <div id="center" class="item--flex-1"></div>
    <div id="right" class="item--flex-1"></div>
</div>
<div id="bottom"></div>

0
ответ дан Adrien Rosi 4 March 2019 в 16:58
поделиться

Упростите, упростите, упростите. Кроме того, в наши дни старайтесь не использовать плавающие элементы для макета, если только вам это не нужно, и вы не понимаете, что происходит с элементом, когда вы это делаете.

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>

0
ответ дан hungerstar 4 March 2019 в 16:58
поделиться

Сетка была бы хорошим способом сделать это тоже, потому что она позволяет всем элементам быть братьями и сестрами внутри одного и того же родителя.

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>

0
ответ дан Mike 4 March 2019 в 16:58
поделиться