html让元素纵向排列,html – 如何使元素排列到父元素的外边缘

我建议你使用flex,这个

article是flex css的良好开端.

我做的是将内容包装到flex-div中,即body-container.然后我将该部分的flex-grow设置为2,并将nav设置为1.因此它将是1：2：1的比例

Webpage Layout

* {

padding: 0px;

}

html {

width: 970px;

margin: auto;

}

.body-container {

display: flex;

}

header, footer {

text-align: center;

height: 10%;

margin: 5px;

border: 1px solid black;

}

section, nav, aside {

text-align: center;

margin: 5px;

border: 1px solid black;

}

section {

flex: 2 0 auto;

}

nav, aside {

flex: 1 0 auto;

}

Header

Aside

Section

Nav