html布局(两列布局的常见方式)

描述:当前端开发者拿到ui设计稿，首先实现的便是页面布局；本节介绍常见的几种布局方式；当然这些布局方式不仅仅用来做整个页面的布局，在某个弹窗或者工具栏中都可以使用

1 两列自适应布局

1.1 第一个div浮动，第二个div用margin-left的方式

首先写如下两个div,设置一样高度，然后效果如下:

<!DOCTYPE html>
<html>
<head><title>html布局(两栏布局和三栏布局的常见方式)</title><style type="text/css">.left{height:120px;background: pink;}.right{height:120px;background: gray;}</style>
</head>
<body><div class="left">左栏</div><div class="right">右栏</div>
</body>
</html>

这里运行效果是为了强调一下，div等块状元素宽度默认值是100%;

言归正传;左边设置左浮动，下面div会浮动在下面，然后设置左侧margin-left即可实现如下效果:

.left{float:left;width:200px;height:120px;background: pink;
}
.right{margin-left:200px;height:120px;background: gray;
}

1.2 第一个div浮动，第二个用overflow:hidden的方式

.left{float:left;width:200px;height:120px;background: pink;
}
.right{overflow: hidden;height:120px;background: gray;
}

1.3 借助display:table实现；该css属性，你可以理解为没有边框的表格，里面的元素都可以理解为table的单元格内容

<!DOCTYPE html>
<html>
<head><title>html布局(两栏布局和三栏布局的常见方式)</title><style type="text/css">.box{display:table;width: 100%;}.left{display:table-cell;width:200px;height:120px;background: pink;}.right{display:table-cell;height:220px;background: gray;}</style>
</head>
<body><div class="box"><div class="left">左栏</div><div class="right">右栏</div></div>
</body>
</html>

上面三种是两列自适应布局的常用方式；平时工作中可以自行选取；

应用场景不限于整个网页，比如弹窗窗口顶部的标题栏，也可以采取上面方式；熟练使用后，可以大大提高效率

这里再强调一个点；还是第一个div浮动，如果两个div高度不同，效果如下

.left{float:left;width:200px;height:120px;background: pink;
}
.right{height:220px;background: gray;
}

很明显，后面div移动到了浮动div的下面，被覆盖；但是div的文字却没有被覆盖，而是自动避开；这里需要特别注意；以后布局可以加以利用；

一切的细节知识，都会在未来某个点帮你节省效率和提升好心情。

2 三栏布局

三栏布局请见双飞翼和圣杯布局一节 http://xiaobaigis.com/Home/WebArticle?ID=9

html布局(两列布局的常见方式)相关推荐

关于页面的多种自适应布局——两列布局
我们在切页面的时候打交道最多的就是关于布局排版的技巧,我这里总结了一些平时做页面时用的到各种布局技巧,作为笔记便于日后随时查询. 1.简单结构1,列表在前,内容在后 1 <style type= ...
CSS布局之两列布局
两列布局两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
前端学习（512）：两列布局的第一种方式的优缺点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（511）：两列布局的第一种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...

html布局(两列布局的常见方式)

html布局(两列布局的常见方式)相关推荐

最新文章

热门文章