在HTML中水平平铺图形
在HTML中水平平铺图形
提问于 2012-08-20 13:37:43
我在水平平铺我的图表而不是一个在另一个下面的时候遇到了广泛的问题。由于某些原因，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，但仍然不起作用。而不是水平平铺，它只是擦除左边距，并坚持到我的地铁应用程序的左侧(但仍然显示一个在另一个下面)。请帮帮我！有人知道怎么解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-08-28 04:28:20
您可以通过在css中将图形区域类设置为display: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}等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12032702
复制相关文章
相似问题
腾讯云开发者
