1

我在水平平铺我的图表而不是一个在另一个之下时遇到了很大的麻烦。出于某种原因，float:left拒绝工作。这是我目前拥有的：

<h2><center>Title1</center></h2>
<div id="flot-graph-1" class="graph-area"></div>
<h2><center>Title2</center></h2>
<div id="flot-graph-2" class="graph-area"></div>
<h2><center>Title3</center></h2>
<div id="flot-graph-3" class="graph-area"></div>

我试过添加style="float:left"div，但它不起作用。我还尝试将整个文本包含在另一个 div 容器中，然后添加相同的样式短语。没有骰子。尝试进入 CSS 页面，尝试类似

#flot-graph-3
{
    float: left;
}

依然没有。我也试过display:inline了，但仍然没有任何效果。而不是水平平铺，它只是擦除左边距并粘在我的地铁应用程序的左侧（但仍然出现在另一个下方）。请帮忙！有谁知道如何解决这个问题？

4

1 回答 1

2

您可以通过在 CSS 中将图形区域类设置为 display:inline-block 并将父容器的宽度设置为“至少”每个图形宽度的 3 倍来做到这一点，这样它们将彼此相邻一条线。

您也可以使用 float:left，但我怀疑您的父元素不够大，并且图表溢出到下一行

display:inline 不起作用，因为 flot 要求图形是块级元素

如果您想要每个图表上方的 h2 标题，您需要将每个图表和标题包装在其自己的 div 中，因为 h2 元素是一个块

例如。

HTML：

<div class="graphWrapper">
    <div class="graph-area">
        <h2><center>Title1</center></h2>
        <div id="flot-graph-1" class="graph-area"></div>
    </div>
    ....etc
</div>

CSS：

.graphWrapper{width:1000px} /* at least 3x width of graph */
.graph-area{display:inline-block}

等等

于 2012-08-27T20:28:20.497 回答