Question

我想用HTML5和CSS绘制它：

我使用

创建了垂直线

.Column-VerticalLine {
    border-right: thin solid #A9A9A9;
}

使用此HTML：

            <div class="col-sm-2 Column-VerticalLine">
                <div></div>
                <div style="font-weight: bold;"> Messeages </div>
                <div style="font-weight: bold;"> Messeage Body bytes </div>
                <div style="font-weight: bold;"> Process Memory </div>
            </div>
            <div class="col-sm-1">
                <div style="font-weight: bold;"> Total </div>
                <div> 0 </div>
                <div> 0B</div>
                <div> 21KB</div>
            </div>

但外观不正确，你可以看到：

我如何解决这个问题并获得我想要的结果？

Answer 1

for line in txtFile:
    if line.startswith(userName + ':')
        print line
        break   # if you sure there is only one user, add break, make you code faster, else delete it.

.flex {
  display: flex;
  text-align: right;
}
.vertical {
  flex-direction: column;
  margin: 0 1em;
}
.vertical div:first-child {
  font-weight: bold;
}
.outer {
  align-items: flex-end;
}
.outer > div:first-child {
  border-right: 1px solid black;
  padding-right: 1em;
  margin-right: .5em;
}
.col {
  margin: 0 .5em;
}
.col div:first-child, .outer > div:first-child {
  font-weight: bold;
}

嗨，这是一个使用flexbox的解决方案，虽然这也可以使用表来实现，因为它是表格数据。

Answer 2

为什么不使用桌子？

table {
   font-family: arial, sans-serif;
   border-collapse: collapse;
   width: 100%;
}

td, th {    
   text-align: left;
   padding: 8px;
}

tr:nth-child(even) {
   background-color: #dddddd;
}

.test{
   width:160px ;
   border-right: 2px solid;
}

<table>
  <tr>
    <th></th>
    <th>Total</th>
    <th>Ready</th>
    <th>Unacked</th>
  </tr>
  <tr>
    <td class="test">Messages</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="test">Messeage Body bytes</td>
    <td>0B</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td class="test">Process Memory</td>
    <td>21KB</td>
    <td></td>
    <td></td>
  </tr>  
</table>

Answer 3

switchMap

Css和html

.Column-VerticalLine {
  border-right: thin solid #A9A9A9;
  margin-top: 1.2em;
}

.colum2 {
  text-align: right;
}

On the JSFiddle

是您的常见保证金问题的解决方案。如果需要，您也可以使用表格标签。我会给你it

的文件

样式HTML表格与垂直线

3 个答案: