1

我用 html+css 制作了一个图表（我真的需要它在所有浏览器中工作）

没关系，但酒吧在顶部，我需要它们粘在底部

我尝试了垂直对齐并尝试了其他一些东西，但它们都没有奏效

这是一个 jsfiddle（如果你看到它，你就会明白我的意思）

提琴手

代码：

CSS：

.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
    width: 100%;
    height: 220px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #777777;
}
#scale, #chartwrap, #description {
    float: left;
    margin-right: 7px;
}
#scale {
    margin-top: -7px;
}
#scale i {
    display: block;
    text-align: right;
}
#chartbox {
    height: 170px;
    display: inline-block;
    border: 2px solid #C7C7C7;
    border-right: 0;
    border-top: 0;
}
.thisday {
    display: inline-block;
    height: 170px;
    margin: 0 18px;
    width: 40px;
    vertical-align: bottom;
}
.vbottom {
    display: block;
}
.thisday .in, .thisday .out {
    width: 18px;
    display: inline-block;
    vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
    text-align: center;
    font-size: 11px;
    color: #2F6D91;
    display: block;
}
div.inbar, div.outbar {
    width: 18px;
    float: left;
    background: #41799F;
}
div.outbar {
    background: #A5D2F0;
}
div#days {
    margin-top: 5px;
}
div#days i {
    font-size: 11px;
    float: left;
    width: 36px;
    margin: 0 18px;
}
#description {
    margin-left: 7px;
}
#outdes {
    margin-top: 1px;
}
#indes i, #outdes i {
    float: left;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #40779D;
}
#outdes i {
    background: #A5D2F0;
}
#indes span, #outdes span {
    float: left;
    margin-left: 3px;
    line-height: 12px;
    font-size: 11px;
}

HTML：

<div id="chart">
    <div id="scale">
        <i>500</i>
        <i>450</i>
        <i>400</i>
        <i>350</i>
        <i>300</i>
        <i>250</i>
        <i>200</i>
        <i>150</i>
        <i>100</i>
        <i>50</i>
        <i>0</i>
    </div>
    <div id="chartwrap">
        <div id="chartbox">
            <!-- DAILY -->
            <div class="thisday">
                <div class="vbottom">
                    <div class="in">
                        <span>50</span>
                        <div class="inbar" style="height:20px;"></div>
                    </div><div class="out">
                        <span>10</span>
                        <div class="outbar" style="height:5px;"></div>
                    </div>
                </div>
            </div>
            <!-- /DAILY -->
            <!-- DAILY -->
            <div class="thisday">
                <div class="vbottom">
                    <div class="in">
                        <span>50</span>
                        <div class="inbar" style="height:20px;"></div>
                    </div><div class="out">
                        <span>10</span>
                        <div class="outbar" style="height:5px;"></div>
                    </div>
                </div>
            </div>
            <!-- /DAILY -->
        <br class="clear">
        </div>
        <div id="days">
            <i>02-17</i>
            <i>02-18</i>
        <br class="clear">
        </div>
    </div>
    <div id="description">
        <div id="indes"><i></i><span>Received</span><br class="clear"></div>
        <div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
    </div>
    <br class="clear">
</div>
4

3 回答 3

2

这是您的新 CSS 代码：

.clear {clear:both; line-height: 0; width: 0; height: 0}


#chart {
    width: 100%;
    height: 220px;
    font-family: Arial,sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #777777;
}
#scale, #chartwrap, #description {
    float: left;
    margin-right: 7px;
}
#scale {
    margin-top: -7px;
}
#scale i {
    display: block;
    text-align: right;
}
#chartbox {
    height: 170px;
    display: inline-block;
    border: 2px solid #C7C7C7;
    border-right: 0;
    border-top: 0;
}
.thisday {
    display: inline-block;
    height: 170px;
    margin: 0 18px;
    width: 40px;
    vertical-align: bottom;
    position: relative;
}
.vbottom {
    display: block;
    position: absolute;
    bottom:0px;
}
.thisday .in, .thisday .out {
    width: 18px;
    display: inline-block;
    vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
    text-align: center;
    font-size: 11px;
    color: #2F6D91;
    display: block;
}
div.inbar, div.outbar {
    width: 18px;
    float: left;
    background: #41799F;
}
div.outbar {
    background: #A5D2F0;
}
div#days {
    margin-top: 5px;
}
div#days i {
    font-size: 11px;
    float: left;
    width: 36px;
    margin: 0 18px;
}
#description {
    margin-left: 7px;
}
#outdes {
    margin-top: 1px;
}
#indes i, #outdes i {
    float: left;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #40779D;
}
#outdes i {
    background: #A5D2F0;
}
#indes span, #outdes span {
    float: left;
    margin-left: 3px;
    line-height: 12px;
    font-size: 11px;
}

综上所述，我只是position: relative;在末尾加了.thisday，我还加了position: absolute;然后bottom:0px;到.vbottom。

此外，如果有一天您放大图形，此方法仍然有效。它会粘在图表的底部，您不必从顶部重新调整。如果您希望条形图从底部或多或少地移动一个像素，只需执行bottom:-1px;orbottom:1px;而不是 0px ，它将被重新调整！

于 2013-08-06T17:41:41.997 回答
1

这将使条形图始终沿图表底部对齐。只要您不需要支持比 8 更早的 IE 版本，这是一个很好的解决方案。

.thisday {
    display: inline-table;
    height: 170px;
    margin: 0 18px;
    width: 40px;
}
.vbottom {
    display: table-cell;
    vertical-align: bottom
}

.thisday是容器，并且已经给出display: inline-table，并且应该在底部的区域有display: table-cell和vertical-align: bottom。

编辑：由于.vbottom不是绝对定位，可以完全省略widthon .thisday，以防您可能希望每天添加更多条。这是这种方法的一个明显优势。

分叉的小提琴：http: //jsfiddle.net/7VvZA/1/

于 2013-08-06T17:44:48.417 回答
0

为图表框类添加相对位置：

position: relative;

和vbottom类的绝对位置：

position: absolute;
bottom: 0;

更新（我在 devtools 工作，这里不保存更改是更新版本）：http:
//jsfiddle.net/QzHzT/2/

于 2013-08-06T17:45:09.843 回答