我建議你使用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

總結

以上是生活随笔為你收集整理的html让元素纵向排列,html – 如何使元素排列到父元素的外边缘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。