十天学会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，但右边的盒子确被挤到了下面。

二、float浮动属性

三、三列布局