1

html+css でグラフを作成しました (すべてのブラウザで動作するために本当に必要です)

大丈夫ですが、バーは上部にあり、下部に貼り付ける必要があります

私は垂直整列を試み、他のことをいくつか試しましたが、どちらもうまくいきませんでした

ここにjsfiddleがあります（見れば、私が何を意味するかがわかります）

Jsフィドル

コード：

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。

また、ある日グラフィックを拡大しても、この方法は機能します。グラフの一番下に固定され、上から再調整する必要はありません。バーを下から多かれ少なかれ移動させたい場合は、0px の代わりに or を実行するだけで再調整されますbottom:-1px;!bottom:1px;

于 2013-08-06T17:41:41.997 に答える