Flotcharts：如何将图例放在图表的右侧

Question

所以我有这个用flotcharts库生成的图表：

HTML是：

<div class="demo-container">
    <div id="legend-container"></div>
    <div id="placeholder" class="demo-placeholder"></div>
</div>

现在，我想将图例放在图表之外。所以我开始在我的情节选项中使用它：

var options = {
    ...,
    legend:{         
        container:$("#legend-container"),
    }
    ...
}

CSS：

#legend-container {
    background-color: #fff;
    padding: 2px;
    margin-bottom: 8px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    margin: 0 auto;
}

结果是：

太棒了！但现在我想放置图例，而不是放在图表的顶部（或底部），而是放在右边的那个空白＆amp;图表旁边有空格。

怎么做？

为了完整性，我的其余CSS是：

.demo-container {
    box-sizing: border-box;
    width: 750px;
    height: 300px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
}

Answer 1

切换div的顺序然后向左浮动：

<div class="demo-container">        
    <div id="placeholder" class="demo-placeholder"></div>
    <div id="legend-container"></div>
</div>

CSS：

.demo-placeholder {
    width: 80%;
    height: 80%;
    font-size: 14px;
    line-height: 1.2em;
    float: left; /*<-- ADD THIS*/
}

示例here。