十天学会HTML+CSS(第三天)：多列布局

今天学习三个知识点。（文末有视频教程）

一、两列布局

首先，通过小米商城的轮播图部分，学习两列布局。

在轮播图这个div中再添加两个两个div。

    <div class="carousel">
        <div class="carousel-left"></div>
        <div class="carousel-right"></div>
    </div>

接着，给它们分别设置宽高和背景颜色，看下效果。

.carousel-left{
    width: 234px;
    height: 460px;
    background-color: #666;
}
.carousel-right{
    width: 992px;
    height: 460px;
    background-color: #888;
}

从页面效果中可以看到，轮播图盒子carousel的宽高明明刚好可以装下两个小盒子，左边的盒子carousel-left和右边的盒子carousel-right。

但右边的盒子却被挤到了下面。这是因为div是块级元素，会独占一行，我们知道div有这个特性就可以了。详细了解：块级元素和内联元素的区别，可以看这篇文章。

二、float浮动属性

解决块级元素独占一行的效果很简单，给div添加浮动属性float就可以。

先让左边的盒子像左浮动，看下效果。

.carousel-left{
    width: 234px;
    height: 460px;
    background-color: #666;
    float:left;
}

如果所示，左边的盒子浮动起来了，右边的盒子也上来了。但是因为左边的盒子浮起来了，所以右边的盒子就占了左边盒子原来的位置。

现在让右边的盒子也浮起来就可以了，看下效果。

.carousel-right{
    width: 992px;
    height: 460px;
    background-color: #888;
    float: left;
}

三、三列布局

三列布局的目标效果是小米商城的导航部分。

首先，在导航盒子里加三个div。这里需要注意下顺序，左边、右边、中间。

    <div class="nav">

        <div class="nav-left"></div>

        <div class="nav-right"></div>

        <div class="nav-mid"></div>

    </div>

接着，分别添加宽、高、背景颜色，左边的左浮动，右边的有浮动，中间先不做处理，看下效果。

.nav-left{
    width: 234px;
    height: 100px;
    background-color: #666;
    float: left;
}
.nav-right{
    width: 234px;
    height: 100px;
    background-color: #888;
    float: right;
}

最后，中间的盒子给高度、背景颜色就可以了，宽度它会自适应。看下效果。

.nav-mid{
    height: 100px;
    background-color: #333;
}

四、视频教程