009两列布局，及商品列布局

最新推荐文章于 2020-07-14 01:10:58 发布

Manta__

最新推荐文章于 2020-07-14 01:10:58 发布

阅读量396

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Manta__/article/details/104863011

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   body{
    min-width: 600px;
   }
   div{
    height: 200px;
   }
   #left{
    width: 200px;
    background: pink;
    float: left;
   }
   #right{
    background: deeppink;
   }
  </style>
 </head>
 <body>
  <div id="left">left</div>
  <div id="right">right</div>
 </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   
   #wrap{
    width: 300px;
    border: 1px solid;
    margin: 0 auto;
   }
   
   #left{
    float: left;
    width: 100px;
    height:100px;
    background: url(../img/person1.png) no-repeat;
    background-position: -260px -100px;
   }
   
   #des{
    padding-left:10px ;
    
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
   }
  </style>
 </head>
 <body>
  <div id="wrap">
   <div id="left"></div>
   <div id="des">
    此产品贱卖  买一送三 此产品贱卖  买一送三此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
    此产品贱卖  买一送三 此产品贱卖  买一送三<br />
   </div>
  </div>
 </body>
</html>

在这里插入图片描述

Manta__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009两列布局，及商品列布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ min...
复制链接

扫一扫