网页设计中分栏布局的几种实现方案

2024-04-08 15:27:06

在网页设计中，分栏布局是常用的布局手法，一般有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面我们先以常见的三栏布局开始，描述一下常用的几种实现方案。

三栏布局

三栏布局最常见的就是左右定宽，中间自适应的方式，我们就先以这种方案开始讲述。

首先我们先假设页面的高度固定为100像素，下面先快速地看一遍，五种布局方案的实现方法。

浮动布局

https://jsfiddle.net/chenfeng...

绝对定位的布局

https://jsfiddle.net/chenfeng...

表格布局

https://jsfiddle.net/chenfeng...

flex布局

https://jsfiddle.net/chenfeng...

网格布局

https://jsfiddle.net/chenfeng...

没有了高度之后

这几种布局方案，表面上看起来没有什么问题，但是这是在我们假设固定了高度的情况下，如果高度是不固定的，这几种布局方案就会带来一系列的问题：

浮动布局

https://jsfiddle.net/chenfeng...
因为jsfiddle嵌入在文章里面的原因，在预览界面看不到问题所在，点开链接后看到的页面如下图所示：

这个时候，我们可以看到，页面的布局已经乱了，至于为什么会乱，做过“首字下沉”效果，或者“图文混排”效果的同学，应该知道这其中的原因，是因为在CSS的浮动机制中，当容器中存在一个浮动的元素时，紧随其后的元素的内容，会紧贴该元素的右边框进行排列，如果超出该元素的高度后，则会紧贴父元素的最左边框进行排列（右浮动则相反）。

要解决这个问题，有很多种方案：

给中间的元素增加左右各100像素的padding值，如果使用这种方法，需要自己想办法处理背景的问题：
创建BFC，为中间元素创造块格式上下文，最常见的做法就是设置 overflow 为 hidden（也有人用 auto ）：

接下来我们看一下绝对定位布局。

网页设计中分栏布局的几种实现方案相关推荐

CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
html网页设计文字出现动画,网页设计中的文字与图片的动画有以下几种形式
下面我们会来详细介绍网页设计中,图文动画的几种展现方式,总结比较全面,大学互相学习一下. 1．滚动文字或图片从屏幕的底部移动到顶部,dZ从左边移动到右边,或沿某个曲线路径滚入页面. 2．跳动利用挤 ...
网页设计框架布局代码_网页设计中的分屏切割布局法
今天和大家聊的是一种关于网页设计中的视觉呈现方法,一般我们称之为"分屏布局",是一种常见的网页设计排版方式,将页面分割为均等或者不均等的两部分,这种方式的好处就是可以将文字信息和图 ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
计算机网页设计布局与排版研究,计算机网页设计中的布局与排版研究
中图分类号:TP393.092 文献标识码:A 文章编号:2096-4706(2018)06-0113-02 Research on Layout and Typese ...
html怎么边调试边显示出来,网页设计中CSS布局调试的十个有效的方法
网页设计中CSS布局调试的十个有效的方法在网站设计中CSS布局是很重要的局部.下面小编给大家分享的是学习网页设计中CSS布局调试的十个有效的方法 ,在这里详细的介绍了学习网页设计中CSS布局调试的十 ...
网页设计中最常见的9种设计风格
网页设计中最常见的9种设计风格如今的网站千千万,每个网页设计都有自己独特的风格.今天唐人设计就来为大家总结网页设计中最常见的9种设计风格,一起来看看吧! 扁平化设计可以说是时下最常用的网页设计风 ...
column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
photoshop 切片 html 图片路径,PS网页设计中切片使用教程
第12章网页设计中的应用 ps是设计行业的"全能型选手".除了在传统设计中起到了中流砥柱的作用,在网页设计行业也有很好的表现.使用ps的网页设计工具及相关功能,可以轻松创建网站图像 ...

最新文章

热门文章