如何在角JS行？ [英] how to create row in angular js?

查看：141 发布时间：2016/5/10 20:22:46 css angularjs

本文介绍了如何在角JS行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我努力使所显示图像的行。其实我的圈子里是不是在右边，我的P是没有得到背景color.Here是我的code
http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=$p$pview

 并[d！HTML和GT;
＆LT; HEAD＆GT;
    ＆LT;间的charset =UTF-8＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展性=无，宽度=设备宽度＆GT;    ＆LT;标题＆GT;离子向下滑动＆LT; /标题＆GT;    ＆LT;链接HREF =// code.ionicframework.com /夜间/ CSS / ionic.css的rel =stylesheet属性＆GT;
    ＆LT;脚本的src =// code.ionicframework.com /夜间/ JS / ionic.bundle.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本src=\"http://$c$c.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5\"></script>＆LT; /头＆GT;
＆LT;风格＆GT;
    .brd {
        边框：1px的固体红色;
    }
＆LT; /风格＆GT;
＆LT;机身NG-应用=＆GT;＆LT; DIV CLASS =清单卡＆GT;    ＆LT; DIV CLASS =项项，阿凡达＆GT;
       ＆LT; DIV的风格=边界：1px的红色实;浮动：左;背景：灰色;＆GT; P＆LT; / DIV＆GT;
        ＆LT; H2＆GT; 16000389＆LT; / H＆GT;
        ＆LT; P＆GT;＆卢瑟福放大器;公司的Alfanso和限价LT; / P＆GT;
        ＆LT; DIV的风格=边界：1px的纯黑色;浮动：左;背景：绿色;边界半径：100％;宽度：50像素，高度：50像素＆GT; 650℃; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

更新Plunker此处的 http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=$p$pview

编辑：在的响应需求光明，我已经改变了使用视口设置的plunker。这将占用的宽度为100％，并设置项目的高度里面留在比例。至于文字，我不知道你能做到这一点纯CSS。

 ＆LT; DIV CLASS =＆GT;其中p DIV CLASS =的风格=高度：30vw;位置：相对;宽度：100％;＆GT;
  ＆LT; DIV的风格=浮动：左;背景：灰色;高度：100％;宽度：10％;文本对齐：中心;＆GT;
    ＆LT; DIV的风格=的位置是：相对;顶部：40％;＆GT; P＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; H2＆GT; 16000389＆LT; / H＆GT;
  ＆LT; P＆GT;＆卢瑟福放大器;公司的Alfanso和限价LT; / P＆GT;  ＆LT; DIV的风格=边界：1px的纯黑色;浮动：权利;背景：绿色;边界半径：100％;宽度：20vw;高度：20vw;位置：绝对的;顶部：20％;文本对齐：中心;右：10％＆GT;
    ＆LT; DIV的风格=的位置是：相对;顶部：30％;＆GT; 650℃; / DIV＆GT;
  ＆LT; / DIV＆GT;＆LT; / DIV＆GT;

我想你会动这一切的内联CSS虽然单独的文件...

I am trying to make a row which is displayed in image .Actually my circle is not on right side and my "P" is not getting background color.Here is my code http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview

can we give row height in percentage ? actually I need my row should look like as shown in image

![<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Swipe Down</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

    <script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>

</head>
<style>
    .brd {
        border: 1px solid red;
    }
</style>
<body ng-app="">

<div class="list card">

    <div class="item item-avatar">
       <div style="border: 1px solid red;float: left;background: gray;">P </div>
        <h2>16000389</h2>
        <p>RutherFord & Alfanso Company Lmt</p>
        <div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
    </div>

</div>

</body>
</html>

解决方案

Update Plunker here: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview

Edit: In light of the responsive requirement I have changed the plunker to use viewport settings. This will take up 100% of the width AND set the height of the items inside it to remain in proportion. As for the text I'm not sure you can do that with pure css.

<div class="">

<div class="" style="height: 30vw; position:relative; width: 100%;">
  <div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
    <div style=" position:relative; top:40%;">P</div>
  </div>
  <h2>16000389</h2>
  <p>RutherFord & Alfanso Company Lmt</p>

  <div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
    <div style=" position:relative; top:30%;">650</div>
  </div>

</div>

I assume you will be moving all this inline css to separate files though...

这篇关于如何在角JS行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在角JS行？ [英] how to create row in angular js?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在角JS行？ [英] how to create row in angular js?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭