Question

我有许多内嵌块div，其中有图。现在我将它们全部连接到同一个图的不同实例，但最终它们将是截然不同的。

当我尝试设置它们时，例如

padding: 10px;
border: 1px solid gray;

Plotly出现双边框并忽略了我的填充。

当然，我可以将外部div中的情节div包裹起来并设计那些，但肯定必须有一种方法来制作情节div，意思是具有由Plotly.plot拾取的id的div，服从一般的CSS而不是做他们自己的事情？

我正在使用Transcrypt Python到JavaScript编译器和普通的plotly.js库，没有任何远程内容。代码如下：

HTML：

<html>
    <head>
        <style>
            div {
                display: inline-block;
                overflow: hidden;
                box-sizing: border-box;
                padding: 10;
                width: 500;
                height: 500;
                border: 1px solid gray;
            }
        </style>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>
    <body>
        <div id="lin"></div>
        <div id="log"></div>
        <div id="polar"></div>
        <div id="ribbon"></div>
        <div id="wireframe"></div>
        <div id="surface"></div>
        <div id="bar"></div>
        <div id="pie"></div>
        <div id="gant"></div>

        <script src="__javascript__/plotly_demo.js"></script>
    </body>
</html>

的Python：

__pragma__ ('jskeys')   # For convenience, allow JS style unquoted string literals as dictionary keys

import numscrypt
import math

xValues = [2 * math.pi * step / 200 for step in range (201)]
yValues = [math.sin (xValue) + 0.5 * math.sin (xValue * 3 + 0.25 * math.sin (xValue * 5)) for xValue in xValues] 

for id in ('lin', 'log', 'polar', 'ribbon', 'wireframe', 'surface', 'bar', 'pie', 'gant'):
    Plotly.plot (
        document.getElementById (id),
        [{
            x: xValues,
            y: yValues
        }],
        {
            margin: {t: 0}
        }
    )
}

Answer 1

我已经更新了你的标记。使用.wrapper元素包装图形div以便于格式化。内联块元素在屏幕上创建一些空间，您可以使用CSS float属性来防止这种情况。不要忘记清除浮动以防止父崩溃，就像我在更新的代码中所做的那样。我也应用了一些负边缘来摆脱双边界：

<html>
<head>
<style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .wrapper{
        padding: 1px 0 0 1px;
    }
    .wrapper div {
        float: left;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        margin-top: -1px;
        margin-left: -1px;
    }
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div class="wrapper clearfix">
        <div id="lin"></div>
        <div id="log"></div>
        <div id="polar"></div>
        <div id="ribbon"></div>
        <div id="wireframe"></div>
        <div id="surface"></div>
        <div id="bar"></div>
        <div id="pie"></div>
        <div id="gant"></div>
    </div>
    <script src="__javascript__/plotly_demo.js"></script>
</body>
</html>

您可以查看此页面，了解.clearfix实际运作的方式 - http://www.tutorialrepublic.com/css-tutorial/css-alignment.php

我如何设置普通css的绘图填充和边框

1 个答案: