float属性或者position属性布局缺点
使用float属性或者position属性进行页面布局时有一个比较显著的缺点：就是第一个div元素与第二个div元素是个自独立的，因此如果在第一个div元素中加入一些内容，将会使得两个元素的底部不能对齐，导致页面中多处一块空白区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用float属性进行页面布局的示例</title>
<style type="text/css">
div{
width: 20em;float: left;}
#div1{
margin-right: 2em;}
#div3{
width: 100%;background-color: yellow;height: 200px;}
</style>
</head>
<body>
<!--
例如：在第一个div元素的开头加上一幅图片，不改变p元素中的文字内容，则会出现这个问题
-->
<div id="div1">
<img src="test.JPG">
<p>示例文字1.相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。示例文字1.相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div2">
<p>示例文字2.相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
</body>
</html>CSS3多栏布局
- column-count: 2表示分为两栏，这里将元素的宽度设置为多个栏目的总宽度
- column-width属性指定每一栏宽度而不设定元素的宽度，则需要在元素外面单独设立一个容器元素，然后指定该容器元素的宽度
- column-gap属性用来设置多栏之间的间隔距离
column-rule属性在栏与栏之间增加一条间隔线
使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度，与使用float属性和position属性时的区别是：使用后两个属性时只需要单独设定每个元素的宽度即可，而使用多栏布局时，需要设定元素中多个栏目相加后的总宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用CSS3多栏布局方式使用示例</title>
<style type="text/css">
#container{
width: 50em;}
#div1{
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-width: 20em;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-gap: 3em;
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
column-rule: 1px solid red;
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
#div3{
width: 100%;background-color: yellow;height: 200px;}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<img src="test.JPG">
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
</div>
</body>
</html>盒布局
在CSS3中，除了多栏布局之外，还可以使用盒布局解决前面所述使用float属性或position属性时左右两栏或多栏中底部不能对齐的问题。使用float属性或者position属性时，左右两栏或多栏中div元素的底部并没有对齐。
通过box属性来使用盒布局
这个例子在最外层的div元素上使用了box属性，并去除了子元素div的float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用盒布局</title>
<style type="text/css">
#container{
display:-moz-box;
display: -webkit-box;
}
#left-sidebar{
width: 200px;padding: 20px;background-color: orange;}
#contents{
width: 300px;padding: 20px;background-color: yellow;}
#right-sidebar{
width: 200px;padding: 20px;background-color: green;}
#left-sidebar,#contents,#right-sidebar{
box-sizing: border-box;}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
</ul>
</div>
<div id="contents">
<h2>内容</h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>
</div>
<div id="right-sidebar">
<h2>右侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
</ul>
</div>
</div>
</body>
</html>盒布局与多栏布局的区别
盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构的时候。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒布局与多栏布局的区别</title>
最低0.47元/天 解锁文章
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
