html - CSS 图表 align=right-6ren

html - CSS 图表 align=right

转载作者：太空宇宙更新时间：2023-11-04 12:57:02

我想将图表置于 align=right 位置，其余的 html 应该从页面的开头开始

<HTML>
<head>
<meta charset="utf-8">
<body bgcolor="#E6E6FA"><style>
strong { font-weight: bold; }
#circle {
background: #f00;
width: 20px;
height: 20px;
border-radius: 50%;
}
#circle1 {
background:  #00FF00;
width: 20px;
height: 20px;
border-radius: 50%;
}

.chart{
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
}
.column{
width: 80px;
height: 100%;
margin: 2px 5px;
float: left;
position: relative;
}

.column .fill{
width: 100%;
position: absolute;
bottom: 0px;
}
.label{
text-align: center;
}

</style> <div class="chart" >
<div class="column-container">
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">PASS</p>
    </div>
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">FAIL</p>
    </div>
    <div class="column">
        <div class="fill"></div>
        <p class="rotulo">SKIPPED</p>
    </div>      
</div>
</div>
<style type="text/css">
.column:nth-child(1) .fill{
    background: green;
    height: 100%;
}
.column:nth-child(2) .fill{
    background: red;
    height: 0%;
}
.column:nth-child(3) .fill{
    background: blue;
    height: 0%;
}   
</style><title>RTS REPORT</title><P><B>TEST SUMMARY</B></p><TABLE CELLPADDING='1'   CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><tr><td><B>AUT:  </td><td>kolps12 x86_64 GNU/Linux</td><B></tr>
<tr><td><B>Version: </td><td>Gold Utility R2.1.3</B></td></tr>
<tr><td><B>Date </td><td>Tue Sep  9 17:34:47 2014<B></td></tr>
</table>
<BR></BR><TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><thead><tr bgcolor="#6495ED"><th colspan="2">TEST_SUMMARY</th></tr></thead>
<tr><td><B>Total Use Cases  </td><td>1</B></td></tr>
<tr><td><B>Total Tests: </td><td>1</B></td></tr>
<tr><td><B>Total Tests Passed:  </td><td>1</B></td></tr>
<tr><td><B>Total Tests Failed:  </td><td>0</B></td></tr>
<tr><td><B>Total To-Dos:    </td><td>0</B></td></tr>
<tr><td><B>Total Skipped:   </td><td>0</B></td></tr>
<tr><td><B>Total Parse Errors:  </td><td>0</B></td></tr>
<tr><td><B>Exit Status: </td><td>0</B></td></tr>
<tr><td><B>Wait Status: </td><td>0</B></td></tr>
<tr><td><B>Elapsed time:    </td><td>26 Sec</B></td></tr>
<tr><td><B>Percentage Passed %: </td><td>100<B></td></tr>
</table>
<BR></BR>




    <TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='100%'  id="my_table1"><tr bgcolor="#00CC00"><td style="width: 95%;"><B>Test Summary for /data/mmukherj/RTS/bin/../test_suite/UC1.1.t</td><td style="width: 5%;">STATUS</B></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Starting UC 1.1</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Case EDMI_PWC_TC01 Started</td><td style="width: 5%;"></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - Customer with id 2035 created with  TLA 4049 and sub 4050 with Products P_EUR_STD and NWS_Electrical_Power</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;"> ok 2 - Sub ac LC state is DEPLOYED</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 3 - Sub ac LC sub state is STD</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;">ok 4 - For Sub acc 4050 METER_CAPABILITY attribute is ERC</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 5 - For Sub acc 4050 EMERGENCY_CREDIT_FLAG attribute is true</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 6 - For Sub acc 4050 METER_CONNECTIVITY_DEFAULT attribute is NND</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 7 - For Sub acc 4050 SYNCHRONIZATION_FAILED attribute is false</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 8 - For TLA 4049   'Product Sold' and  'Currency' attributes are present</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - EDMI_PWC_TC01</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test case EDMI_PWC_TC01 finished</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Suite 1.1 Finished </td><td style="width: 5%;"></td></tr>

最佳答案

JSFiddle - DEMO或 SHOW

您可以使用 float:right; 到 .chart

HTML:

<body bgcolor="#E6E6FA">
    <style>
        strong {
            font-weight: bold;
        }
        #circle {
            background: #f00;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        #circle1 {
            background: #00FF00;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        .chart {
            border: solid thin silver;
            width: 450px;
            height: 300px;
            padding: 10px;
            float:right;
        }
        .column {
            width: 80px;
            height: 100%;
            margin: 2px 5px;
            float: left;
            position: relative;
        }
        .column .fill {
            width: 100%;
            position: absolute;
            bottom: 0px;
        }
        .label {
            text-align: center;
        }
    </style>
    <div class="chart">
        <div class="column-container">
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">PASS</p>
            </div>
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">FAIL</p>
            </div>
            <div class="column">
                <div class="fill"></div>
                <p class="rotulo">SKIPPED</p>
            </div>
        </div>
    </div>
    <style type="text/css">
        .column:nth-child(1) .fill {
            background: green;
            height: 100%;
        }
        .column:nth-child(2) .fill {
            background: red;
            height: 0%;
        }
        .column:nth-child(3) .fill {
            background: blue;
            height: 0%;
        }
    </style>
    <title>RTS REPORT</title>
    <P>
        <B>TEST SUMMARY</B></p><TABLE CELLPADDING='1'   CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><tr><td><B>AUT:  </td><td>kolps12 x86_64 GNU/Linux</td><B></tr>
<tr><td><B>Version: </td><td>Gold Utility R2.1.3</B></td></tr>
<tr><td><B>Date </td><td>Tue Sep  9 17:34:47 2014<B></td></tr>
</table>
<BR></BR><TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='30%' id="my_table"><thead><tr bgcolor="#6495ED"><th colspan="2">TEST_SUMMARY</th></tr></thead>
<tr><td><B>Total Use Cases  </td><td>1</B></td></tr>
<tr><td><B>Total Tests: </td><td>1</B></td></tr>
<tr><td><B>Total Tests Passed:  </td><td>1</B></td></tr>
<tr><td><B>Total Tests Failed:  </td><td>0</B></td></tr>
<tr><td><B>Total To-Dos:    </td><td>0</B></td></tr>
<tr><td><B>Total Skipped:   </td><td>0</B></td></tr>
<tr><td><B>Total Parse Errors:  </td><td>0</B></td></tr>
<tr><td><B>Exit Status: </td><td>0</B></td></tr>
<tr><td><B>Wait Status: </td><td>0</B></td></tr>
<tr><td><B>Elapsed time:    </td><td>26 Sec</B></td></tr>
<tr><td><B>Percentage Passed %: </td><td>100<B></td></tr>
</table>
<BR></BR>




    <TABLE CELLPADDING='1' CELLSPACING='1' BORDER='1' bordercolor=black width='100%'  id="my_table1"><tr bgcolor="#00CC00"><td style="width: 95%;"><B>Test Summary for /data/mmukherj/RTS/bin/../test_suite/UC1.1.t</td><td style="width: 5%;">STATUS</B></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Starting UC 1.1</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Case EDMI_PWC_TC01 Started</td><td style="width: 5%;"></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - Customer with id 2035 created with  TLA 4049 and sub 4050 with Products P_EUR_STD and NWS_Electrical_Power</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;"> ok 2 - Sub ac LC state is DEPLOYED</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 3 - Sub ac LC sub state is STD</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
<tr style="color: #00CC00; "><td style="width: 95%;">ok 4 - For Sub acc 4050 METER_CAPABILITY attribute is ERC</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 5 - For Sub acc 4050 EMERGENCY_CREDIT_FLAG attribute is true</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 6 - For Sub acc 4050 METER_CONNECTIVITY_DEFAULT attribute is NND</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 7 - For Sub acc 4050 SYNCHRONIZATION_FAILED attribute is false</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 8 - For TLA 4049   'Product Sold' and  'Currency' attributes are present</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr style="color: #00CC00; "><td style="width: 95%;">ok 1 - EDMI_PWC_TC01</td><td align="middle" style="width: 5%;"><div id="circle1"></div></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test case EDMI_PWC_TC01 finished</td><td style="width: 5%;"></td></tr>
    <tr tr style="color: #3399CC ; "><td style="width: 95%;"># Test Suite 1.1 Finished </td><td style="width: 5%;"></td></tr>

关于html - CSS 图表 align=right，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25744669/

文章推荐： java - 具有并发输入/输出流的Java流程

文章推荐： linux - bash 脚本中 rsync 的问题

文章推荐： r - 在Win7 64位上使用R的rJava包

文章推荐： c++ - 询问比要求更多的元素

alignment - 'align' 与 'text-align' 的正确用法是什么
我试图找出在表格单元格上放置对齐属性与使用 text-align css 属性之间的区别。下面的代码显示了 IE 与其他浏览器中的不同结果。在 IE 中，对齐最终会对齐每个子子项，因此文本“test”
javascript - Summernote Editor中如何添加Alignment(left Align, center align, right align)工具栏
我正在 summernote HTML 编辑器上做一些 POC，我正在使用自定义工具栏，但我不知道如何添加对齐(左对齐、居中对齐、右对齐)工具栏，所以有人可以帮助我实现这一目标。还有人可以帮我找到更
alignment - 什么是 "alignment"，以及如何从一种对齐方式转换为另一种对齐方式？
以下是从节对齐转换为文件对齐的步骤: 找到数据的 RVA 从 RVA 导出引用的数据所属的部分。这是微不足道的，因为部分不重叠。文件头中提供了各个部分的起始地址。找出RVA和section的起始地址
css - flex-wrap 如何与 align-self、align-items 和 align-content 配合使用？
align-self 在以下代码中， align-self 与 flex-wrap: nowrap 一起使用。 flex-container { display: flex; flex-wra
CSS悬停: aligning on bottom: how to align on top?
这是CSS: .divPhoto { border:1px solid #999; width:140px; height:140px; border-radius:3
alignment - Windows Phone "Alignment image"- 为什么？
我正在为 Windows Phone 8 开发，我已经设计了我的应用程序，我注意到有一个“分配网格”代码，默认情况下可以在新项目中取消注释。看看下面的文件中的描述: --> 这是取
html - 我们有 text-align : -webkit-right;(Google and safari)text-align: -moz-right;(Firefox)text-align: -o-right;(Opera). 的浏览器前缀 IE 是什么？
我们有浏览器前缀或黑客 (for Google and Safari) text-align: -webkit-right; (for Firefox) text-align:
c++ - "minimum alignment"和 "preferred alignment"和有什么区别？
最近我观察到，在 Clang 9.0 上 alignof 和 __alignof 为 unsigned long long 返回不同的值，并且在 https://reviews.llvm.org/D5
安卓用户界面 : align a fragment above another fragment that is aligned bottom
我已经一年多没有为 Android 开发了，我对它有点生疏了。我正在尝试设置一个有点简单的 UI:屏幕底部的底部栏和它上面的 fragment (但没有填充整个高度)。像这样: 我认为这会很简单，但经
html - 为什么 align 和 text-align 与表格不同？
你好，我正在尝试找到一种使用“讨厌的”align=center 技巧的方法.. 嗯，当我查看一些代码时，我注意到两个非常相似的片段呈现的并不相同。我找不到让他们表现相同的方法。这包括用 div 替换顶
c++ - 它叫 "memory alignment"还是 "data alignment"？
抱歉这个愚蠢的问题。我只想知道我们什么时候讨论内存中的数据应该如何对齐之类的。这个主题是叫“内存对齐”还是“数据对齐”，还是我可以随便叫它什么？最佳答案在编程的上下文中，它被称为 data str
html - 为什么 align-content/align-items 在这里不起作用？
所以我只是想制作一个简单的导航栏，并且我刚开始使用 flexbox。为什么 align-content 在这里不起作用？我可以让 justify-content 工作，但我就是无法垂直对齐。这是代码。
html - 柔性 : Aligning align a button to the right and content to the left
我从这个 SO 开始答案，我试图使用提供的纯 flexbox 答案。然而，当我尝试这个时，我看到了以下结果。我不确定为什么 Button 4 在行中出现的位置高于其余元素。 HTML
css - 网格布局中的 align-items 与 align-content 有什么区别？
我已通读 A complete guide to Grid ，但仍然对两组容器属性之间的差异感到困惑，即“justify/align-items”与“justify/align-content”。我
html - align-items、align-self 在 IE11 上不起作用
我有一个simple plunker here. .container { display:flex; flex-flow: row nowrap; justify-content: sp
java - 如何从 Berkeley Aligner 读取 Alignment 类型？ - java
从 http://code.google.com/p/berkeleyaligner/ 下载主干代码后，我将该项目添加到 Eclipse 上的构建路径中。然后，使用下面的代码，我可以提取从 sourc
CSS flex 盒 : difference between align-items and align-content
这个问题在这里已经有了答案: What's the difference between align-content and align-items? (15 个答案) 关闭 7 年前。我发现 C
安卓布局 : How to align with respect to rightmost view but keep all elements left aligned
[short text][image1][image2]____________________________________ [this is a reallyyyyyyy............
css - 动画 : move right aligned text to the right and align left
我有一个很小的菜单列表，当鼠标靠近时它应该会增长。在其原始状态下，菜单是右对齐的，悬停时每第二个元素向右移动并左对齐以为增加的高度腾出空间(参见 JSFiddle )。 ul { font-siz
html - Flex align-self 属性在具有 align-items : baseline 的父项中不起作用
这个问题在这里已经有了答案: Align child elements of different blocks (3 个答案) 关闭 3 年前。

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS 图表 align=right

JSFiddle - DEMO或 SHOW