Question

我正在尝试使用HTML和CSS创建的两个不同的条形图：水平和垂直。如何将垂直条形图中的条从中心移动到底部？

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Global */
.stat-table-horz, .stat-table-vert {
    border-collapse: collapse;
}
.bar {
     background: #0c0;
}

/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
    padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
    border-top: 1px solid #090;
    border-bottom: 1px solid #090;
    padding: 0;
    width: 240px;
}
.stat-table-horz td .horz-bar {
    height: 30px;
}

/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
    padding: 5px;
}
.stat-table-vert tr:first-of-type td {
    border-left: 1px solid #090;
    border-right: 1px solid #090;
    padding: 0;
    height: 160px;
    width: 80px;
}
.stat-table-vert td .vert-bar {
    
}

＆＃13;

<body>
<table class="stat-table-horz">
    <tr>
        <td>Health</td>
        <td>
            <!-- First bar -->
            <div class="bar horz-bar" style="width: 10%;"></div>
        </td>
    </tr>
    <tr>
        <td>Attack</td>
        <td>
            <!-- Second bar -->
            <div class="bar horz-bar" style="width: 90%;"></div>
        </td>
    </tr>
    <tr>
        <td>Speed</td>
        <td>
            <!-- Third bar -->
            <div class="bar horz-bar" style="width: 60%;"></div>
        </td>
    </tr>
</table>
<br>
<table class="stat-table-vert">
    <tr>
        <td>
            <!-- First bar -->
            <div class="bar vert-bar" style="height: 10%;"></div>
        </td>
        <td>
            <!-- Second bar -->
            <div class="bar vert-bar" style="height: 90%;"></div>
        </td>
        <td>
            <!-- Third bar -->
            <div class="bar vert-bar" style="height: 60%;"></div>
        </td>
    </tr>
    <tr>
        <td>Health</td>
        <td>Attack</td>
        <td>Speed</td>
    </tr>
</table>
</body>

＆＃13;

我原来的JSFiddle：https://jsfiddle.net/jkantner/b7aa2yu1/

Answer 1

添加

.stat-table-vert td {
    vertical-align:bottom;
}

Answer 2

添加流动的CSS

.stat-table-vert td {
        position: relative;
    }
    .stat-table-vert .bar.vert-bar{
        position: absolute;
        bottom: 0;
        width: 100%;
    }

或

添加

.stat-table-vert td {
    vertical-align:bottom;
}

https://jsfiddle.net/b7aa2yu1/4/

Answer 3

在vertical-align: bottom;元素上使用vertical-align: baseline或td可以解决问题。

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* Global */
.stat-table-horz, .stat-table-vert {
    border-collapse: collapse;
}
.bar {
     background: #0c0;
}

/* Horizontal bar chart */
.stat-table-horz td:first-of-type {
    padding: 5px;
}
.stat-table-horz td:nth-of-type(2) {
    border-top: 1px solid #090;
    border-bottom: 1px solid #090;
    padding: 0;
    width: 240px;
}
.stat-table-horz td .horz-bar {
    height: 30px;
}

/* Vertical bar chart */
.stat-table-vert tr:nth-of-type(2) td {
    padding: 5px;
}
.stat-table-vert tr:first-of-type td {
    border-left: 1px solid #090;
    border-right: 1px solid #090;
    padding: 0;
    height: 160px;
    width: 80px;
    vertical-align: baseline;
}
.stat-table-vert td .vert-bar {
    
}

<body>
<table class="stat-table-horz">
    <tr>
        <td>Health</td>
        <td>
            <!-- First bar -->
            <div class="bar horz-bar" style="width: 10%;"></div>
        </td>
    </tr>
    <tr>
        <td>Attack</td>
        <td>
            <!-- Second bar -->
            <div class="bar horz-bar" style="width: 90%;"></div>
        </td>
    </tr>
    <tr>
        <td>Speed</td>
        <td>
            <!-- Third bar -->
            <div class="bar horz-bar" style="width: 60%;"></div>
        </td>
    </tr>
</table>
<br>
<table class="stat-table-vert">
    <tr>
        <td>
            <!-- First bar -->
            <div class="bar vert-bar" style="height: 10%;"></div>
        </td>
        <td>
            <!-- Second bar -->
            <div class="bar vert-bar" style="height: 90%;"></div>
        </td>
        <td>
            <!-- Third bar -->
            <div class="bar vert-bar" style="height: 60%;"></div>
        </td>
    </tr>
    <tr>
        <td>Health</td>
        <td>Attack</td>
        <td>Speed</td>
    </tr>
</table>
</body>

Vertical align

如何在CSS垂直条形图中底部对齐条形图？

3 个答案: