学习DIV+CSS网页布局之两列布局

作者：彼岸时光字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含学习DIV+CSS网页布局之两列布局等相关知识,彼岸时光希望在学习及工作中可以帮助到您

DIV+CSS 网页布局第二篇：两列布局

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
.main-left{
width:30%;
height:800px;
background:red;
float:left;
}
.main-right{
width:70%;
height:800px;
background:pink;
float:right;
}
#footer{
clear:both;
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer">页脚</div>
</body>
</html>

</div> </div>

2、固定宽度两列布局

　　宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。

　　要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定宽度两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50

您可能想查找下面的文章:

2017-06-02font-size定义为0在IE6下的妙用
2017-06-02文字环绕图片的布局效果(使用动态div实现)
2017-06-02设置DIV最小高度以及高度自适应随着内容的变化而变化
2017-06-02CSS中让DIV居中的代码
2017-06-02div+CSS制作类似微信对话气泡效果的实例总结
2017-06-02一个div在浏览器水平居中的实现方法
2017-06-02使用z-index:-1 让一个层在所有层的下面当背景
2017-06-02纯CSS实现多级半透明效果菜单代码
2017-06-02不定宽高的文字在div中垂直居中实现方法
2017-06-02.clearfix:after(清除浮动)中各个属性及值详细解说

学习DIV+CSS网页布局之两列布局

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容