H5页面左图右边文字如何布局


<! DOCTYPE html >
< html  lang ="en" >
< head >
     < meta  charset ="UTF-8" >
     < title >商品 </ title >
     < meta  content ="yes"  name ="apple-mobile-web-app-capable" >
     < meta  content ="yes"  name ="apple-touch-fullscreen" >
     < meta  content ="telephone=no"  name ="format-detection" >
     < meta  content ="black"  name ="apple-mobile-web-app-status-bar-style" >
     < meta  name ="viewport"  content ="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
     < style  type ="text/css" >
        *
{ margin:  0;  padding:  0;}
        .int_goods a
{ display:  block; height:  3.467rem; background:  #fff; padding:  0.800rem; display:  -moz-box; display:  -webkit-box; display:  box;  text-decoration:  none; border-bottom:  1px solid #ddd;}
        .left_logo
{ width:  3.467rem; height:  3.467rem; border:  1px solid #F0F0F0; position:  absolute; overflow:  hidden;}
        .left_logo img
{ width:  100%; position:  relative; top:  50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%);}
        .right_des
{ height:  3.467rem;  margin-left:  4.267rem; box-flex:  1; -webkit-box-flex:  1; background:  #fff url(http://static.17shihui.com/pageapp/images/serve/jiao.png) no-repeat right center; background-size:  0.375rem 0.625rem;}
        .right_des span,.right_des b
{ display:  block; width:  12.347rem; overflow:  hidden; text-overflow: ellipsis; white-space:  nowrap;}
        .right_des span
{ font-size:  0.875rem; color:  #2B3139; padding-top:  0.640rem;}
        .right_des b
{ font-size:  0.750rem; color:  #79889F; padding-top:  0.3rem;}
    
</ style >

</ head >
< body >
     < div  class ="int_goods" >
         < href ="" >
             < class ="left_logo" >< img  src ="http://static.17shihui.com/pageapp/images/serve/3.jpg" ></ p >
             < class ="right_des" >
                 < span >某某某某某某某某某科技有限公司 </ span >
                 < b > 纯天然植物绿色产品 </ b >
             </ p >
         </ a >
     </ div >
</ body >
</ html >
View Code


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM