Javascript 如何对齐3个不同的图表？_Javascript_Html_Css

Javascript 如何对齐3个不同的图表？

javascript html css

Javascript 如何对齐3个不同的图表？,javascript,html,css,Javascript,Html,Css,我有三张图表。我希望第三张图表位于中间，但与图表的左侧对齐现在图表如下所示：图像在左侧对齐，我希望图表变成这样：我希望图像像这样对齐，下面是一段代码： <!doctype html> <html> <head> <title>Adaptive size</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

我有三张图表。我希望第三张图表位于中间，但与图表的左侧对齐

现在图表如下所示：

图像在左侧对齐，我希望图表变成这样：

我希望图像像这样对齐，下面是一段代码：

<!doctype html>
<html>

<head>
    <title>Adaptive size</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body {
            padding: 30px;
            margin: 0px;

        }

        .clear:before,
        .clear:after {
            content: "";
            display: table;
        }

        .clear:after {
            clear: both;
        }

        .clear {
            *zoom: 1;

        }

        .gauge {
            display: block;
            float: Left;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin: 2% 2% 5% 13%;



        .size-1 {
            width: 30%;
        }

        .size-2 {
            width: 30%;
        }
        }
         .size-3 {
            width: 40%;

        }


        .h-split {
            display: block;
            float: left;
            width: 0%;
            min-height: 0px;
        }

    </style>
</head>

<body>
    <div id="jg1" class="gauge size-1"></div>
    <div class="h-split"></div>
    <div id="jg2" class="gauge size-2"></div>
    <div class="h-split"></div>
    <div id="jg3" class="gauge size-3"></div>
    <div class="h-split"></div>
    <div class="clear"></div>
    <script src="../raphael-2.1.4.min.js"></script>
    <script src="../justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var jg1, jg2, jg3;

        var defs1 = {
            label: "Weight Left",

            value: 65.56,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2
            },
            counter: true,
            relativeGaugeSize: true
        }
          var defs2 = {
            label: "Weight Right",
            value: 65,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2
            },
            counter: true,
            relativeGaugeSize: true
        }

          var defs3 = {
            label: "Total Weight",
            value: 65,
            min: 0,
            max: 200,
            decimals: 3,
            gaugeWidthScale: 0.6,
            pointer: true,
            pointerOptions: {
                toplength: 10,
                bottomlength: 10,
                bottomwidth: 2

            },
            counter: true,
            relativeGaugeSize: true
        }



        jg1 = new JustGage({
            id: "jg1",
            defaults: defs1
        });

        jg2 = new JustGage({
            id: "jg2",
            defaults: defs2
        });

        jg3 = new JustGage({
            id: "jg3",
            defaults: defs3

        });

    });
    </script>
</body>

</html>


自适应大小
身体{
填充：30px；
边际：0px；
}
.clear:之前，
.清楚：之后{
内容：“；
显示：表格；
}
.清楚：之后{
明确：两者皆有；
}
.清楚{
*缩放：1；
}
.仪表{
显示：块；
浮动：左；
边框：1px实心#ddd；
框大小：边框框；
利润率：2%2%5%13%；
.1号{
宽度：30%；
}
.2号{
宽度：30%；
}
}
.尺码-3{
宽度：40%；
}
.h-split{
显示：块；
浮动：左；
宽度：0%；
最小高度：0px；
}
document.addEventListener（“DOMContentLoaded”），函数（事件）{
var jg1、jg2、jg3；
变量defs1={
标签：“剩余重量”，
价值：65.56，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
var defs2={
标签：“重量正确”，
价值：65，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
变量defs3={
标签：“总重量”，
价值：65，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
jg1=新标准({
id:“jg1”，
默认值：defs1
});
jg2=新标准({
id:“jg2”，
默认值：defs2
});
jg3=新标准({
id:“jg3”，
默认值：defs3
});
});

我怎样才能像第二张图一样对齐图表？

这样就可以了

我从

尺寸-3

上取下浮子，并确保清除前两个仪表。然后添加

margin:0自动到size-3
类以使其居中

document.addEventListener（“DOMContentLoaded”），函数（事件）{
var jg1、jg2、jg3；
变量defs1={
标签：“剩余重量”，
价值：65.56，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
var defs2={
标签：“重量正确”，
价值：65，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
变量defs3={
标签：“总重量”，
价值：65，
分:0,，
最高：200，
小数：3，
标距刻度：0.6，
指针：对，
指针选项：{
顶长：10，
底部长度：10，
底宽：2
},
柜台：是的，
相对化：正确
}
jg1=新标准({
id:“jg1”，
默认值：defs1
});
jg2=新标准({
id:“jg2”，
默认值：defs2
});
jg3=新标准({
id:“jg3”，
默认值：defs3
});
});
正文{
填充：30px；
边际：0px；
}
.clear:之前，
.清楚：之后{
内容：“；
显示：表格；
}
.清楚：之后{
明确：两者皆有；
}
.清楚{
*缩放：1；
}
.仪表{
显示：块；
浮动：左；
边框：1px实心#ddd；
框大小：边框框；
利润率：2%2%5%13%；
}
.1号{
宽度：30%；
}
.2号{
宽度：30%；
}
.尺码-3{
宽度：40%；
保证金：0自动；
浮动：无；
}
.h-split{
显示：块；
浮动：左；
宽度：0%；
最小高度：0px；
}
感谢您的帮助