未對齊的 CSS 布局 - 具有固定中心的 3 列布局

Question

我是 css 的新手，我正在嘗試創建一個 3-col 布局。 也應該有一個居中的頁腳。 頁面的總高度應該填滿它當前的屏幕。 寬度似乎不對。

目前，頁腳似乎在尺寸和位置上都未對齊。

 .container { display: flex; flex-direction: row; width: 100vw; height: 100vh; } body { margin: 0; font-family: 'Ubuntu', sans-serif; }.left { background-color: gainsboro; width: 20%; }.center { background-color: white; width: 60%; }.right { background-color: gainsboro; width: 20%; }.footer { height: 20px; margin-left: 20%; margin-right: 20%; text-align: center; width: 60%; background-color: red; }

 <body> <div class="container"> <div class="left"></div> <div class="center">Bla bla bla bla bla</div> <div class="right"></div> </div> <div class="footer">this is a footer!</div> </body>

Answer 1

如果您需要頁腳位於中心列的底部，請將其放在其中。 使用display: flex in .center你可以在.footer中使用margin-top: auto將其推到底部。

 .container { display: flex; flex-direction: row; width: 100vw; height: 100vh; } body { margin: 0; font-family: 'Ubuntu', sans-serif; }.left { background-color: gainsboro; width: 20%; }.center { display: flex; flex-direction: column; background-color: white; width: 60%; }.right { background-color: gainsboro; width: 20%; }.footer { width: 100%; height: 20px; margin-top: auto; text-align: center; background-color: red; }

 <body> <div class="container"> <div class="left"></div> <div class="center"> Bla bla bla bla bla <div class="footer">this is a footer!</div> </div> <div class="right"></div> </div> </body>

未對齊的 CSS 布局 - 具有固定中心的 3 列布局

問題描述

1 個解決方案

解決方案1
1 已采納 2019-09-29 01:32:47

未對齊的 CSS 布局 - 具有固定中心的 3 列布局

問題描述

1 個解決方案

解決方案1 1 已采納 2019-09-29 01:32:47

解決方案1
1 已采納 2019-09-29 01:32:47