2.4两列布局-蒲公英云

2.4两列布局

网页中经常看到左边为商品图片，右边为实物介绍，可以通过两列布局实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
             }
            #wrap{
                width: 600px;
                height: 400px;
                border: 1px solid;
                margin: 0 auto;
            }
            .left{
                float: left;
                width: 400px;
                height: 400px;
                background: url(img/企鹅.jpg) no-repeat;
                background-position: -100px 0;
            }
            .right{
                padding-left: -10px;
                background: yellow;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="left">
            </div>
            <div class="right">
                企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在<br />
                南极安家落户。全世界的企鹅共有18种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；<br />
                脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛<br />
                间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。<br />
            </div>
        </div>
    </body>
</html>