Fatal编程技术网
  • css/
  • Css 如何在angular js中创建行？

Css 如何在angular js中创建行？

css angularjs

Css 如何在angular js中创建行？,css,angularjs,Css,Angularjs,我试图在图像中显示一行。实际上我的圆圈不在右边，我的“p”没有背景色。这是我的代码 我们能给出行高的百分比吗？ 实际上我需要我的行应该如图所示 ![<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

我试图在图像中显示一行。实际上我的圆圈不在右边，我的“p”没有背景色。这是我的代码

我们能给出行高的百分比吗？ 实际上我需要我的行应该如图所示

![<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>
在此处更新Plunker：

编辑：根据响应要求，我已将plunker更改为使用视口设置。这将占据100%的宽度，并将其内部项目的高度设置为保持比例。至于文本，我不确定你能用纯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>
我假设您将所有这些内联css移动到单独的文件中，尽管…

这是一个css问题，更改您的标签以获得快速回答。我添加了css3问题。如果您有一些知识，请发布。不清楚您是否需要全宽的行，或者圆圈是否会有不同的大小等。我的解决方案适用于您显示的图像。您的回答不正确。它没有响应，请检查大小Window请检查我的问题it responsive以了解所有浏览器的宽度和高度。但it not responsive是否需要100%的行宽？您希望它以何种方式响应？是的，我想要100%的宽度，它可以在所有屏幕分辨率下工作