版权声明：转载请注明出处 https://blog.csdn.net/u010502101/article/details/83051784
网页中经常看到左边为商品图片，右边为实物介绍，可以通过两列布局实现。
<!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>
