Question

我在水平平铺图形而不是一个在另一个之下时遇到了很大的麻烦。出于某种原因，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>

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

的内容

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

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

Answer 1

你可以通过设置图形区域类来显示：css中的inline-block并将父容器的宽度设置为“至少”每个图形宽度的3倍，这样它们就会坐在旁边彼此排成一行。

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

显示：内联不起作用，因为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}

等

以HTML格式水平绘制平铺图

1 个答案: