简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

CSS：三栏布局，两边固定，中间自适应_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:50:49
Original
1560 people have browsed it

之前去面试被问到一个布局的问题：
三栏布局，两边固定，中间自适应

当时给出的答案是左右两边分别左浮动和右，中间自适应，然后设置一个margin。也算是实现了效果。

left
right
center
Copy after login

注意：中间一列一定要放到最下面

在网上发现了另一种用定位的方式实现的。左右设置为固定定位，中间自适应。

Copy after login

还有类似这样的面试题：比如，中间固定，两边自适应；左边固定，右边自适应等等。有时间再去研究。

Related labels：
CSS：三栏布局，两边固定，中间自适应
source：php.cn
Previous article：很漂亮的用户登录界面HTML模板_html/css_WEB-ITnose Next article：图片宽度超出div，css控制图片不改变原大小情况居中显示，图片超出div部分隐藏_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The css style remains unchanged. If the order of the two div blocks is exchanged, they will be displayed one above the other and cannot be displayed side by side. why is that?
From 2019-03-23 14:11:40
0
2
1164
I don't know why my code float doesn't work
From 2018-03-26 14:50:58
0
3
1302
前端 - css table布局大法，解决你大部分居中、多列等高、左右布局的问题 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽...
From 2017-04-17 13:49:32
0
0
560
css - 如何实现四栏等宽自适应布局 面试的时候碰到的问题， 如何实现四栏等宽，中间设置一定间隙的自适应布局： 如图，在未知宽度的父容器中， 里面四列等宽，中间间隙相等，比如10px：（我目前只想到是用JS先获取父容器...
From 2017-04-17 13:49:25
0
3
328
前端 - 清除浮动 高度变高 两列布局 左侧固定，右侧自适应实现过程中，右侧内容区使用通用的清除浮动方法，导致使用.clearfix的容器高度变高，好像是受左侧浮动影响，具体原因未知，求解答。 代码测试链接地址...
From 2017-04-17 11:39:13
0
5
457
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！