因为HTML流式布局的特性,水平分栏与垂直对齐的实现都不是那么的直观。尤其自适应三栏布局应用非常广泛,通常有两列是固定宽度的,另外一列根据屏幕大小自适应宽度(比如百度音乐、百度云等)。自适应三栏布局可以说是前端工程师面试的必选题目。
效果图
水平分栏有多种实现方式,最简单直观的是基于table的实现,这便是本文主要讨论的内容。先看我们要实现的效果图:
HTML框架
Left content | Center content | Right content |
首先声明一个
。而这三列才是我们想要的内容,分别为左边栏、中间部分、右边栏。 CSS 接着稍微来点CSS,让我们能够看得更清楚: table{ height: 350px; margin: 10px; border: 1px solid grey; } #center { width: 100%; } #left, #right { min-width: 200px; background-color: lightyellow; } 这样便达到了截图中的效果。Table自适应布局的关键在于自适应的那一栏宽度应当设置为100%,固定宽度的两栏应设置min-width(注意不是width!)。 Div模拟Table 看官想必已经发现了,我们要显示的只是三栏内容,却添加了很多语义并不直观的
|