[分享]css3怎样将div分为两部分

CSS3可以很方便地将一个div分为两部分，分别设置不同的样式。下面我们来看看怎样实现：

 .container{
        width: 500px;
        height: 300px;
        background-color: #ccc;
        display: flex;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: #f00;
    }
    .right{
        flex: 1;
        height: 100%;
        background-color: #00f;
    } 

首先我们需要一个父级容器，此处用class为container的div来代表。我们设定该容器的宽度为500px，高度为300px，并设置背景颜色为#ccc。接着我们给这个容器设置了一个display:flex属性，这是CSS3中的一种新属性，可以很方便地实现弹性布局。

接下来，我们设定div.container中的左侧部分。我们给这个左侧部分添加了一个class为left的div，设置宽度为200px，高度为100%，并将背景颜色设定为#f00。样式设定完毕后，该部分会被自动放置在div.container的左侧。

最后，我们来实现右侧部分。我们给这个右侧部分添加了一个class为right的div，并将它的高度设定为100%。我们设定flex:1属性来让它沾满整个div.container的剩余空间。最后，我们设定该部分的背景色为#00f，完成样式设定。